var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP };var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' });marker.setMap(map);// Zoom to 9 when clicking on markergoogle.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); });}google.maps.event.addDomListener(window, 'load', initialize);a.menu_google_maps_events{font-weight:bold;}

Google 地图事件

点击标记缩放地图 - 绑定在google地图上的事件。

点击标记缩放地图

我们仍然使用上一遍文章使用的英国伦敦的地图。

点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。

代码如下:

实例

// Zoom to 9 when clicking on marker
 google.maps.event.addListener(marker,'click',function() {
   map.setZoom(9);
   map.setCenter(marker.getPosition());
   });
尝试一下 »

使用 addListener() 事件处理程序来注册事件的监听。该方法使用一个对象,一个事件来监听,当指定的事件发生时 函数将被调用。

重置标记

我们通过给地图添加事件处理程序来改变 'center' 属性,以下代码使用 center_changed 事件在3秒后标记移会中心点:

实例

google.maps.event.addListener(map,'center_changed',function() {
   window.setTimeout(function() {
     map.panTo(marker.getPosition());
   },3000);
 });
尝试一下 »

点击标记时打开信息窗口。

点击标记在信息窗口显示一些文本信息:

实例

var infowindow = new google.maps.InfoWindow({
   content:"Hello World!"
   });

 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
   });
尝试一下 »

设置标记及打开每个标记的信息窗口

当用户点击地图时执行一个窗口

用户点击地图某个位置时使用 placeMarker() 函数在指定位置上放置一个标记,并弹出信息窗口:

实例

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
   });

 function placeMarker(location) {
   var marker = new google.maps.Marker({
     position: location,
     map: map,
   });
   var infowindow = new google.maps.InfoWindow({
     content: 'Latitude: ' + location.lat() +
     '<br>Longitude: ' + location.lng()
   });
   infowindow.open(map,marker);
 }
尝试一下 »

Google 地图 - 事件参考手册

Google Maps API 参考手册

新闻动态 联系方式 广告合作 招聘英才 安科实验室 帮助与反馈 About Us

Copyright © 2013 - 2019 Ancii.com All Rights Reserved京ICP备18063983号-5 京公网安备11010802014868号