谷歌地图 活动


单击标记进行缩放

我们仍然使用上一页的地图:以英国伦敦为中心的地图。

现在,我们希望在用户单击标记时进行缩放(我们将一个事件处理程序附加到标记上,以便在单击时缩放地图)。

这是添加的代码:

示例

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

我们使用 addListener() 事件处理程序注册事件通知。该方法采用一个对象、一个要侦听的事件以及一个在指定事件发生时调用的函数。



平移回到标记

在这里,我们保存缩放更改并在 3 秒后平移地图:

示例

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},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(map, event.latLng);
});

function placeMarker(map, 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);
}