`
ponlya
  • 浏览: 160722 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 事件

    博客分类:
  • maps
 
阅读更多

事件处理:

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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics