Google Maps 事件



  • 单击标记进行缩放

    叠加层是地图上绑定到纬度/经度坐标的对象。
    我们仍然使用Google Maps 基本中的地图:以中国北京市为中心的 Google 地图。
    现在,我们要在用户单击标记时进行缩放(我们将事件处理程序附加到一个标记上,该标记可在单击时缩放地图)。
    这是添加的代码:
    // 单击标记时放大至9
    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);
    }