Google Maps（JS）开发入门(11)：获取地图事件属性

发布时间: 2013-12-31 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS笔记 » Google Maps开发教程（JS） » Google Maps（JS）开发入门(11)：获取地图事件属性

在前一篇点击地图添加marker效果文章中，提到了关于地图交互的内容。不过上文中是将用户的操作传给地图，本文中将地图的变化传给用户。在本文中，将捕捉Google Maps的缩放行为，同时将缩放的属性显示出来。

核心代码

var map;
var tw=new google.maps.LatLng(25.091075 , 121.55983449999997)
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: tw
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  //创建一个提示框
  var infowindow = new google.maps.InfoWindow({
    content: '请缩放地图',
    position: tw
  });
  infowindow.open(map);
  //添加缩放监听事件
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    map.setCenter(tw);
    infowindow.setContent('缩放级别: ' + zoomLevel);
  });
}
window.onload = initialize;

代码解释

这里的核心在于google.maps.event.addListener，添加了一个缩放监听事件'zoom_changed'，也就是说在用户缩放地图的时候触发调用。

效果展示

全部代码

<!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: 8,
    center: tw
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  //创建一个提示框
  var infowindow = new google.maps.InfoWindow({
    content: '请缩放地图',
    position: tw
  });
  infowindow.open(map);
  //添加缩放监听事件
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    map.setCenter(tw);
    infowindow.setContent('缩放级别: ' + zoomLevel);
  });
}
window.onload = initialize;
</script>
</head>
<body>
  <div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

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