Google maps API V3基本功能总结

原文地址：http://blog.csdn.net/pandaflyup/article/details/8455432

这周任务完成一个地图和视频资源结合的demo，做完之后回顾总结一下所用的google map知识，写在这里就当作备忘吧。
本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念，如果需要更加详细的信息，请直接阅读Google提供的关于map的文档。
google map api v3文档链接：
英文版：https://developers.google.com/maps/documentation/javascript/reference
中文版：https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN

1、在页面中加入Google Map服务

[javascript] view plain copy print ?

1. <script type="text/javascript"  
2.   src="https://maps.google.com/maps/api/js?sensor=false">  
3. </script>  

<script type="text/javascript"
  src="https://maps.google.com/maps/api/js?sensor=false">
</script>

2、加载Google Map API

[javascript] view plain copy print ?

1. function initialize() {  
2.         var myLatlng = new google.maps.LatLng(39.9629, 116.3581);  
3.         var myOptions = {  
4.             zoom: 16,  
5.             center: myLatlng,  
6.             mapTypeId: google.maps.MapTypeId.ROADMAP  
7.         }  
8.         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
9. }  
10. google.maps.event.addDomListener(window, "load", initialize);  

最后一句话是打开浏览器加载地图。

3、向地图中添加marker

[javascript] view plain copy print ?

1. function initialize() {  
2.         var myLatlng = new google.maps.LatLng(39.9629, 116.3581);  
3.         var myOptions = {  
4.             zoom: 16,  
5.             center: myLatlng,  
6.             mapTypeId: google.maps.MapTypeId.ROADMAP  
7.         }  
8.         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
9.         var image='Image/webcam.png';  
10.         var marker = new google.maps.Marker({  
11.             position: myLatlng,
12.             map: map,  
13.             icon:image,  
14.             title:"hello,world!"  
15.          })  
16. }  

每个标记都是一个google.maps.Marker对象，在实例化时需要给定一定的配置信息，如标记的位置。

通过icon可以设定自己想显示的图标，不设置则显示Google map默认的图标。title表示鼠标放到marker上要显示的值。

4、向地图中添加信息窗口infowindow

[javascript] view plain copy print ?

1. function initialize() {  
2.         var myLatlng = new google.maps.LatLng(39.9629, 116.3581);  
3.         var myOptions = {  
4.             zoom: 16,  
5.             center: myLatlng,  
6.             mapTypeId: google.maps.MapTypeId.ROADMAP  
7.         }  
8.         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
9.         var image='Image/webcam.png';  
10.         var marker = new google.maps.Marker({  
11.             position: myLatlng,  
12.             map: map,  
13.             icon:image,  
14.             title:"hello,world!"  
15.          })  
16.         var contentString = 'Hello World';  
17.   
18.   
19.         var infowindow = new google.maps.InfoWindow({  
20.         content: contentString  
21.          });  
22.         google.maps.event.addListener(marker, 'click', function() {  
23.           infowindow.open(map,marker);  
24.          });  
25. }  

每个信息窗口都是一个google.maps.InfoWindow对象，在实例化时需要给定一定的配置信息，如窗口中的内容，标记的位置。
其中需要说明的是，配置信息中的content即可以是html字符串，也可以是一个dom节点。要让一个信息窗口显示出来，我们可以调用它的open方法，并制定显示在那个Map实例对象中。注意，如果在信息窗口构造时的配置中已经制定了位置（通过position字段），那么直接使用infoWindow.open( map )，就可以显示在地图的制定位置上。当然，我们也可以将信息窗口的显示绑定在已经在地图中的标记对象中，只需在open的第二个参数中制定标记对象即可infoWindow.open( map, marker )。

5、事件绑定
使用google.maps.event.addListener()方法来进行事件的监听。该方法接受三个参数：一个对象，一个待侦听事件以及一个在指定事件发生时调用的函数。
监听地图的缩放：

[javascript] view plain copy print ?

1. google.maps.event.addListener(map, 'zoom_changed', function() {  
2.   /* 状态改变时间不提供回调参数，我们需要去手动获取数值，比如利用map.getZoom()来获取当前的缩放级别 */  
3.       });  

标记的点击：

[javascript] view plain copy print ?

1. google.maps.event.addListener( marker, 'click', function( event) {  
2.  // 点击事件后要实现的函数；   
3.       });  

监听dom事件:

[javascript] view plain copy print ?

1. google.maps.event.addDomListener(window, 'load', initialize);