Google Maps API 简易教程（二）

一、Google Map Event

    单击一下Marker，就会触发click事件。拖曳当前地图，将会触发center_changed事件。而google.maps.addListener监听地图上每一个动作，

相应的事件处理代码由用户编写。一下举几个例子，以加深理解。

  （1）单击Marker改变Zoom

     如上图所示，单击London上的Marker,当前的地图的Zoom改变，相应的代码如下：

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

  （2）Pan返回Marker

    在本例中，单击地图左上角的pan的一个角，地图的中心发生了改变，3秒后又返回到原来的中心，这将会触发center_changed事件。相应的代码如下：

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

  （3）单击Marker显示InfoWindow

     如上图，单击Marker,显示一个含有Hello world 字符的InfoWindow,相关代码如下：

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

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });

 （4）设置Markers，并为每一个Marker打开一个InfoWindow

   相关代码如下：

  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);
}

        以上只是几个Event处理的简单应用，还有其他的常见事件，比如MapsEventListener，MouseEvent等等，在这里不再细讲。如果有兴趣的话，请查阅相关文档。