GoogleMap V3 事件

最新推荐文章于 2026-01-07 00:05:42 发布

原创最新推荐文章于 2026-01-07 00:05:42 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

maps 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在地图应用中实现地图平移、缩放事件监听，并实时显示当前地图缩放比例，通过JavaScript与Google Maps API的结合，提供交互式地图体验。

事件处理：

From:https://developers.google.com/maps/documentation/javascript/events?hl=zh-CN

添加center_changed事件,click,DOM load

<style>
	html, body, #map-canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(30.51667,114.31667),     
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  
  //3 秒后将地图平移回标记处
  //如果检测视口中的变化，使用特定的 bounds_changed 事件，而非其组成部分 zoom_changed 和 center_changed 事件。
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: '点击缩放' 
  }); 
  
  google.maps.event.addListener(map, 'center_changed', function() { 
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="map-canvas"></div>

监听缩放比例变化

<script>
var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,     
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  
  var infowindow = new google.maps.InfoWindow({
    content: '点击或缩放查看缩放比例',
    position: myLatLng
  });
  infowindow.open(map);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    map.setCenter(myLatLng);
    infowindow.setContent('缩放比例: ' + zoomLevel);
	infowindow.open(map);
  });

} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>