Google Maps(JS)开发入门(15):修改地图控件属性

在上一篇添加地图控件的文章中,我介绍了手动添加地图控件的方法。同时Google Maps也提供了地图控件属性的修改方法,例如:修改Google Maps控件的样式,本文中提供下拉式的地图类型选项和不显示缩放刻度的样式,如图

核心代码

var map;
var tw=new google.maps.LatLng(25.091075 , 121.55983449999997)
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: tw,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    }
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}

效果展示

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地图控件属性</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API-KEY&sensor=true&language=zh-cn"></script>
<script type="text/javascript">
var map;
var tw=new google.maps.LatLng(25.091075 , 121.55983449999997)
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: tw,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    }
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
  <div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

把这段代码直接复制保存为.html文件,然后修改你的API Key即可使用。如果你没有 ,这里是API-KEY申请方法

没有下文

如果对本文有其他疑问,可以在本文下方留言,或者到 麻辣GIS问答 提问。
本站QQ群:291616564 麻辣GIS
微信公众号:malagis,扫描二维码直接关注。

打赏¥1

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论