GoogleMap V3 事件

最新推荐文章于 2024-10-07 09:24:46 发布

ponlya

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量116

点赞数

分类专栏： maps 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ponlya/article/details/84436134

版权

maps 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件处理：

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>