Google Maps API简易教程(二)

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

 一、Google Map Event

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

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

  (1)单击Marker改变Zoom

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

 

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

  (2)Pan返回Marker

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

 

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

  (3)单击Marker显示InfoWindow

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

 

  1. var infowindow = new google.maps.InfoWindow({ 
  2.   content:"Hello World!" 
  3.   }); 
  4.  
  5. google.maps.event.addListener(marker, 'click', function() { 
  6.   infowindow.open(map,marker); 
  7.   }); 

 (4)设置Markers,并为每一个Marker打开一个InfoWindow

   相关代码如下:

 

  1. google.maps.event.addListener(map, 'click', function(event) { 
  2. placeMarker(event.latLng); 
  3. }); 
  4.  
  5. nction placeMarker(location) { 
  6. var marker = new google.maps.Marker({ 
  7.   position: location, 
  8.   map: map, 
  9. }); 
  10. var infowindow = new google.maps.InfoWindow({ 
  11.   content: 'Latitude: ' + location.lat() + 
  12.   '<br>Longitude: ' + location.lng() 
  13. }); 
  14. infowindow.open(map,marker); 

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

原文链接:http://www.cnblogs.com/williamcai/archive/2013/03/01/2937933.html

责任编辑:彭凡 来源: 博客园
相关推荐

2013-02-28 13:35:02

Google Maps

2013-06-06 13:35:33

Google Maps

2013-01-08 17:30:31

Google MapsAndroid MapMapFragment

2010-11-02 14:31:44

Google Maps

2011-12-02 09:59:29

API

2012-05-13 13:55:04

苹果

2013-05-20 16:42:13

GoogleGoogle Maps

2010-05-21 15:46:41

Google Code

2011-11-02 17:31:58

Maps API

2011-04-18 10:52:17

Jpcap

2012-05-09 11:56:28

RIM

2009-07-24 09:26:27

Google Maps

2011-10-27 11:32:36

Google云计算SQL数据库

2015-01-14 09:46:52

Google API

2010-06-30 10:46:20

Linux SNMP安

2010-05-21 12:27:22

SVN使用教程

2015-03-18 10:58:27

Google Now API

2009-01-04 09:16:11

google Read开发APIGoogle API

2009-04-22 17:16:50

Analytics AGoogle测试

2009-02-09 09:30:20

Google APIAJAX SearchGoogle News
点赞
收藏

51CTO技术栈公众号