Google Maps(JS)开发入门(14):添加地图控件

在上一篇文章中,我介绍了禁用默认UI 的方法,通过文章中的方法,我们可以显示一张空地图。本文介绍怎样把地图控件添加上去,涉及的地图控件主要有:缩放控件(zoomControl),移动控件(panControl)和地图类型控件(mapTypeControl)。

核心代码

var map;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw,
    disableDefaultUI: true,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
  };
  var domid=document.getElementById('map-canvas');
  map = new google.maps.Map(domid,mapOptions);
}

这里将panControl,zoomControl,mapTypeControl设置了ture,对应的缩放控件(zoomControl),移动控件(panControl)和地图类型控件(mapTypeControl)将会在地图中显示。

效果展示

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>添加controls</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<!--加载google map api-->
<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;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw,
    disableDefaultUI: true,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
  };
  var domid=document.getElementById('map-canvas');
  map = new google.maps.Map(domid,mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

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

Google Maps(JS)开发入门(13):禁用默认UI Google Maps(JS)开发入门(15):修改地图控件属性

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

发表评论