google map api V3 随笔..............................

Bertha 。 2022-09-29 04:11 217阅读 0赞

[google map api V3 官方地址][google map api V3]

需要引入script标签

一段加入地图的代码

new google.maps.LatLng(myLatitude, myLongitude)  是设置地图精度纬度的

构建一个 `LatLng` 对象，以 \{纬度, 经度\} 的顺序传递其参数：

myOptions 配置项  zoom 大小级别    center 中心的位置  就是前面创造出的对象

mapTypeId  支持4个类型

new google.maps.Map(document.getElementById('cc'), myOptions)

创建地图类  第一个参数是容器元素  第二个参数是配置

地图事件

用户事件                (其实就是鼠标操作时候的事件)

*  `'click'`
 *  `'dblclick'`
 *  `'mouseup'`
 *  `'mousedown'`
 *  `'mouseover'`
 *  `'mouseout'`
 *   
    
    `地图事件`
    
     
    
     
    
     
 *  `zoom_changed`
 *  `center_changed`
 *   
    
    `<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ready</title> <style type="text/css"> .cc{height:20px; width:250px; background-color:#993300} </style> </head> <body> <div id="cc" style="width: 400px; height: 400px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> (function(win,doc,undefined){ var gMap = google.maps, uuuid = 1, myLatlng = new gMap.LatLng(22.53821,113.9198), myOptions = { zoom : 13, center : myLatlng, mapTypeId : gMap.MapTypeId.ROADMAP }, map = new gMap.Map(document.getElementById('cc'), myOptions); //marker 是标记 var marker = new gMap.Marker({ position : myLatlng, map : map, title : "hello BeiJu!" }); gMap.event.addListener(marker,'click',function(){ map.setZoom(8); }); gMap.event.addListener(map,'click',function(event){ new gMap.Marker({ position : event.latLng, map : map, title : '新增加标注!' }); map.setCenter(event.latLng); }); var zoomLevel, infoWindow = new gMap.InfoWindow({ content : 'Zoom Level Test', size : new gMap.Size(50,50), position : myLatlng }); infoWindow.open(map); gMap.event.addListener(map,'zoom_changed',function(){ zoomLevel = map.getZoom(); infoWindow.setContent("当前Zoom:"+zoomLevel); if(zoomLevel===6){ alert('6le') map.setZoom(13); } }); })(window,document); </script> </body> </html>`
    
     
    
     
    
     
    
     
    
     
    
     
    
     
    
    `控件`
    
     
    
     
    
     
    
     
    
    **导航控件**可显示为以下 `style` 选项之一：
    
     *  `google.maps.NavigationControlStyle.SMALL`，用于显示迷你缩放控件，其中仅限 **＋** 和 **－** 按钮。此样式适用于移动设备。
     *  `google.maps.NavigationControlStyle.ZOOM_PAN`，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。
     *  `google.maps.NavigationControlStyle.ANDROID`，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。
     *  `google.maps.NavigationControlStyle.DEFAULT`，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
    
    **MapType 控件**可显示为以下 `style` 选项之一：
    
     *  `google.maps.MapTypeControlStyle.HORIZONTAL_BAR`，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
     *  `google.maps.MapTypeControlStyle.DROPDOWN_MENU`，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。
     *  `google.maps.MapTypeControlStyle.DEFAULT`，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。
    
    请注意，如果您确实想要修改任何控件选项，您还是应当通过将 `MapOptions` 值设置为 `true` 以显式地启用相应的控件。
    
     
    
     
    
    ## 修改控件 ##
    
    您可以在创建地图时通过地图的 `MapOptions` 对象中的字段指定控件的显示。下面对这些字段进行了说明：
    
     *  `mapTypeControl` 可启用/停用“地图类型”控件，该控件允许用户在地图类型（如“地图”和“卫星”）之间切换。默认情况下，此控件将显示在地图右上角。`mapTypeControlOptions` 字段可进一步指定要用于此控件的 `MapTypeControlOptions`。
     *  `navigationControl` 可启用/停用“导航”控件，该控件可提供一个平移/缩放控件。默认情况下，此控件将显示在地图左上角。`navigationControlOptions` 字段可进一步指定要用于此控件的 `NavigationControlOptions`。
     *  `scaleControl` 可启用/停用“比例”控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。`scaleControlOptions` 可进一步指定用于此控件的 `ScaleControlOptions`。
    
    请注意，您可以为您最初停用的控件指定选项。
    
     
    
    ## 控件定位 ##
    
    每个控件选项都包含一个 `position` 属性（类型为 `ControlPosition`），它指明要在地图上放置该控件的位置。控件的定位并不是绝对的；相反，API 会在给定的约束条件（如地图大小）下，通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意：虽然 API 会尝试以智能方式排列控件，但这并不能保证控件不会叠加指定的复杂布局。
    
    系统支持以下控件位置：
    
     *  `TOP` 表示控件应沿着地图顶部中心放置。
     *  `TOP_LEFT` 表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。
     *  `TOP_RIGHT` 表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。
     *  `BOTTOM` 表示控件应沿着地图底部中心放置。
     *  `BOTTOM_LEFT` 表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。
     *  `BOTTOM_RIGHT` 表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。
     *  `LEFT` 表示控件应沿着地图左侧放置，位于使用 `TOP_LEFT` 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
     *  `RIGHT` 表示控件应沿着地图右侧放置，位于使用 `TOP_RIGHT` 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
    
     
    
     
    
     
 *  `bounds_changed`
 *   
 *  `ROADMAP`，用于显示 Google Maps 默认的普通二维图块。
 *  `SATELLITE`，用于显示拍摄的图块。
 *  `HYBRID`，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。
 *  `TERRAIN`，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。
 *  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ready</title> <style type="text/css"> .cc\{height:20px; width:250px; background-color:\#993300\} </style> </head> <body> <div id="cc" style="width: 400px; height: 400px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> (function(win,doc,undefined)\{ var gMap = google.maps, uuuid = 1, myLatlng = new gMap.LatLng(22.53821,113.9198), myOptions = \{ zoom : 13, center : myLatlng, //取消默认控件设置 //disableDefaultUI : true, //导航控件的初始启用/停用状态 //navigationControl : true, //缩放控件的初始启用/停用状态。 //scaleControl : false, navigationControl : true, //小缩放按钮 navigationControlOptions: \{ style : google.maps.NavigationControlStyle.SMALL, position : google.maps.ControlPosition.TOP\_RIGHT \}, mapTypeControl : true, //地图类型可选形式 mapTypeControlOptions: \{ style : google.maps.MapTypeControlStyle.DROPDOWN\_MENU, position : google.maps.ControlPosition.BOTTOM \}, mapTypeId : gMap.MapTypeId.ROADMAP \}, map = new gMap.Map(document.getElementById('cc'), myOptions); \})(window,document); </script> </body> </html>
    
     
    
     
    
    # 自定义控件 #
    
    除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件，浮动在地图之上的绝对位置处；这与“叠加”不同，后者会随下面的地图一起移动。从本质上讲，控件只是一个在地图上具有绝对位置的 `<div>` 元素，它会向用户显示某个用户界面，并处理与用户或地图的交互（通常通过某个事件处理程序）。
    
    要创建您自己的自定义控件，没有什么需要遵循的“规则”。不过，您可以将以下指导原则视为最佳实践的参考：
    
     *  为要显示的控件元素定义适当 CSS。
     *  针对地图属性更改或用户事件（如 `'click'` 事件），通过事件处理程序处理与用户或地图的交互。
     *  创建一个 `<div>` 元素以承载控件并将此元素添加到 `Map` 的 `controls` 属性中。
    
    ## 处理自定义控件的事件 ##
    
    要使控件有用，它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入，也可以响应 `Map` 的状态变化。
    
    对于响应用户输入，Google Maps API 提供了一个跨浏览器的事件处理方法 `addDomListener()`，它可以处理浏览器的多数[支持的 DOM 事件][DOM]。
    
     
    
    ## 定位自定义控件 ##
    
    要在地图上定位自定义控件，您可以在 `Map` 对象的 `controls` 属性中将其放在适当位置。此属性包含一个 `google.maps.ControlPosition` 数组。您可以通过将 `Node`（通常是 `<div>`）添加至适当 `ControlPosition` 向地图中添加自定义控件。（有关这些位置的信息，请参见上面的控件定位。）
    
    每个 `ControlPosition` 会存储一个显示在该位置的控件的 `MVCArray`。因此，当您向该位置添加或从中删除控件时，API 将相应更新控件。
    
    API 按照 `index` 属性的顺序将控件放在每个位置，并会首先放置索引值较低的控件。例如，位置 `BOTTOM_RIGHT` 处的两个自定义控件将按照此索引顺序进行排列，并优先放置索引值较低的控件。默认情况下，所有自定义控件将在放置完任何 API 默认控件之后进行放置。您可以通过将控件的 `index` 属性设置为一个负值覆盖此行为。请注意，如果希望在放置相同位置的默认 API 控件“之前”放置您的控件，通常只需设置一个索引值。
    
     
    
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ready</title> <style type="text/css"> .cc\{height:20px; width:250px; background-color:\#993300\} </style> </head> <body> <div id="cc" style="width: 400px; height: 400px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> (function(win,doc,undefined)\{ var gMap = google.maps, uuuid = 1, myLatlng = new gMap.LatLng(22.53821,113.9198), myOptions = \{ zoom : 13, center : myLatlng, //小缩放按钮 navigationControlOptions: \{ style : google.maps.NavigationControlStyle.SMALL, position : google.maps.ControlPosition.TOP\_RIGHT \}, mapTypeControl : true, //地图类型可选形式 mapTypeControlOptions: \{ style : google.maps.MapTypeControlStyle.DROPDOWN\_MENU, position : google.maps.ControlPosition.BOTTOM \}, mapTypeId : gMap.MapTypeId.ROADMAP \}, map = new gMap.Map(document.getElementById('cc'), myOptions); var div = document.createElement('div'); div.className = 'cc'; div.innerHTML = 'beijubeiju..'; gMap.event.addDomListener(div,'click',function()\{ map.setZoom(15); \}); div.index = 1; map.controls\[google.maps.ControlPosition.TOP\_RIGHT\].push(div); \})(window,document); </script> </body> </html>
    
     
    
     OverlayView
    
    自定义叠加层
    
    Google Maps API 第 3 版提供了用于创建自定义叠加层的 `OverlayView` 类。`OverlayView` 是一个基类，提供了您在创建叠加层时必须实现的若干方法。该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。
    
    要创建自定义叠加层，请执行以下操作：
    
     *  将自定义对象的 `prototype` 设置为 `google.maps.OverlayView()` 的新实例。这可以有效地实现叠加层类的“子类化”。
     *  为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。
     *  在原型中实现 `onAdd()` 方法，以将叠加层附加到地图上。当地图准备好附加叠加层后，系统将会调用 `OverlayView.onAdd()`。
     *  在原型中实现 `draw()` 方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用 `OverlayView.draw()`。
     *  您还应当实现 `onRemove()` 方法，以清理在叠加层中添加的所有元素。
    
    一个简单的例子.................
    
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ready</title> <style type="text/css"> .cv\{height:250px; width:250px; background-color: \#CCFFCC\} </style> </head> <body> <div id="cc" style="width: 680px; height: 680px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> function custom(map,text,latLng)\{ this.map = map; this.text = '<div class="cv">' + text + '</div>'; this.latLng = latLng; this.div = null; // Explicitly call setMap() on this overlay this.setMap(map); \}; custom.prototype = new google.maps.OverlayView(); custom.prototype.onAdd = function()\{ this.div = document.createElement('div'); this.div.style.position = 'absolute'; this.div.innerHTML = this.text; this.getPanes().overlayLayer.appendChild(this.div); \}; custom.prototype.draw = function()\{ var latLng = this.getProjection().fromLatLngToDivPixel(this.latLng), size = new google.maps.Size(0,0); this.div.style.left = latLng.x + size.width + 'px'; this.div.style.top = latLng.y + size.height + 'px'; \}; custom.prototype.onRemove = function()\{ this.div.parentNode.removeChild(this.div) this.div = null; \}; window.onload = function()\{ var myLatlng = new google.maps.LatLng(22.56821,113.9198), myOptions = \{ zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, \}, map = new google.maps.Map(document.getElementById("cc"), myOptions); new google.maps.Marker(\{ position : myLatlng, map : map, title : "Hello World!" \}); new custom(map,'<div class="cv">我擦....</div>',myLatlng); \}; </script> </body> </html>
    
     
    
     
    
    划线
    
     
    
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>google map</title> <style type="text/css"> .cc\{height:100px; width:100px; border:1px solid \#666666; background-color:\#FFFF66;\} .tip\{width:350px;height:196px;background-image:url(tip.png); color:\#FFF; padding:20px 0 0 20px;\} body\{font-size:12px;\} </style> </head> <body> <div id="ff" style="width: 400px; height: 350px"></div> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> (function(doc,undefined)\{ var win = this, gMap = win.google.maps, map = new gMap.Map(doc.getElementById('ff'),\{ zoom : 13, center : new gMap.LatLng(22.53821,113.9198), mapTypeId : gMap.MapTypeId.ROADMAP \}); new gMap.Polyline(\{ path : \[ new gMap.LatLng(22.56821,113.9198), new gMap.LatLng(22.54821,113.9298), new gMap.LatLng(22.52821,113.9158), new gMap.LatLng(22.50821,113.9258) \], strokeColor : '\#000000', strokeOpacity : 1.0, strokeWeight : 2 \}).setMap(map); \})(document); </script> </body> </html>
    
     
    
    当前地图 整个容器经纬度操作
    
     
    
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <div id="ff" style="width: 400px; height: 400px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> window.onload = function()\{ var gMap = google.maps, myLatlng = new gMap.LatLng(22.53821,113.9198), myOptions = \{ zoom : 13, center : myLatlng, mapTypeId : gMap.MapTypeId.ROADMAP \}, map = new gMap.Map(document.getElementById('ff'), myOptions), getBounds; setTimeout(function()\{ getBounds = map.getBounds(); //右上角经纬度 var dot1 = getBounds.getNorthEast(), //左下角经纬度 dot2 = getBounds.getSouthWest(), stepX = ((dot1.ra\*1000- dot2.ra\*1000)/5)/1000, stepY = ((dot1.sa\*1000- dot2.sa\*1000)/5)/1000, i = 0; //随机添加5个点 while(i++<5)\{ new gMap.Marker(\{ position : new gMap.LatLng(dot2.ra+stepX\*i,dot2.sa+stepY\*i), map : map, title : '生活中充满了悲剧！！' \}); \} \},200); //如果客户不喜欢google map 自带的弹出框 想自己制作 //但是自己制作弹出层 是不会自适应当前地图全部显示的 只是根据弹出层的大小 和 当前地图的 整个的位置 来计算了 \}; </script> </body> </html>
    
     
    
     
    
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>google map</title> <style type="text/css"> .cc\{height:100px; width:100px; border:1px solid \#666666; background-color:\#FFFF66;\} .tip\{width:350px;height:196px;background-image:url(tip.png); color:\#FFF; padding:20px 0 0 20px;\} body\{font-size:12px;\} </style> </head> <body> <div id="ff" style="width: 400px; height: 350px"></div> <input type="button" value='aaaaaa' id='aa'> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script> <script type = "text/javascript"> (function(doc,undefined)\{ var win = this, gMap = win.google.maps; function customLayer(map,latLng)\{ this.map = map; this.latLng = latLng; this.div = null; this.setMap(map); \}; customLayer.prototype = new gMap.OverlayView(); $.extend(customLayer.prototype,\{ onAdd : function()\{ this.div = doc.createElement('div'); this.div.style.position = 'absolute'; this.div.style.display = "none"; this.getPanes().overlayLayer.appendChild(this.div); \}, draw : function(latLng,html,size)\{ latLng = this.getProjection().fromLatLngToDivPixel(latLng||this.latLng); size = size || \[0,0\]; size = new gMap.Size(size\[0\],size\[1\]); this.div.style.left = latLng.x + size.width + 'px'; this.div.style.top = latLng.y + size.height + 'px'; if(!html||html.replace(//s+/g,'')==='') return; this.div.innerHTML = html; \}, onRemove : function()\{ if(!this.div) return; this.div.parentNode.removeChild(this.div) this.div = null; \}, show : function()\{ this.div.style.display = ""; this.div.parentNode &&(this.div.parentNode.style.zIndex = "1000"); \}, hide : function()\{ this.div.style.display = "none"; \} \}); win.vv = function()\{ this.init.apply(this,arguments); \}; vv.prototype = \{ init : function(container,LatLng,mapOptions)\{ container = typeof container === 'string' ? $('\#'+container)\[0\] : container; LatLng = LatLng || \[22.53821,113.9198\]; mapOptions = $.extend(\{ zoom : 13, center : new gMap.LatLng(LatLng\[0\],LatLng\[1\]), navigationControl : true, navigationControlOptions : \{ style : google.maps.NavigationControlStyle.DROPDOWN\_MENU \}, mapTypeId : gMap.MapTypeId.ROADMAP \},mapOptions || \{\}); //地图类 this.map = new gMap.Map(container,mapOptions); //自定义层 this.tip = new customLayer(this.map,new gMap.LatLng(LatLng\[0\],LatLng\[1\])); //点击的弹出信息 this.popup = new customLayer(this.map,new gMap.LatLng(LatLng\[0\],LatLng\[1\])); // onAdd方法会延迟执行的 所有这里也做一个延迟 var self = this; setTimeout(function()\{ self.popup.div.className ='tip'; \},300); //定时器 this.timer = null; //当前经纬度 this.currLatLng = null; \}, //弹出的提示信息......... popupShow : function(html,latLng)\{ this.popup.draw(latLng,html,\[-185,-216\]); this.popup.show(); \}, tipShow : function(html,latLng)\{ //alert(latLng); //如果当前经纬度存在 if(this.currLatLng !== null)\{ //当前经纬度等于现在的经纬度 则不进行操作 //如果不等于 关闭层 clearTimeout(this.timer); this.timer = null; if(this.currLatLng.ra !== latLng.ra||this.currLatLng.sa !== latLng.sa)\{ this.tip.hide(); this.currLatLng = latLng; this.tip.draw(latLng,html); this.tip.show(); \} \}else\{ this.currLatLng = latLng; this.tip.draw(latLng,html); this.tip.show(); \} \}, tipHide : function()\{ this.timer = setTimeout((function(oThis)\{ return function()\{ oThis.tip.hide(); oThis.currLatLng = null; \}; \})(this),500); \}, setMarker : function(options)\{ if(!options.latLng) return; var marker = new gMap.Marker(\{ position : new gMap.LatLng(options.latLng\[0\],options.latLng\[1\]), map : this.map, icon : options.imgSrc || 'm.gif' \}), self = this; options.events&&options.events.length>0 &&$.each(options.events,function(i,o)\{ gMap.event.addListener(marker,o.event,function()\{ o.handle.apply(self,\[marker\]); \}); \}); \}, bind : function(type,handle)\{ if(!type || !handle) return; var self = this; gMap.event.addListener(this.map,type,function()\{ handle.apply(self); \}); \}, panTo : function(pos)\{ var latLng = this.map.getCenter(); this.map.setCenter(new gMap.LatLng(latLng.ra + pos.left,latLng.sa + pos.top)); \} \} \})(document); $(document).ready(function($)\{ var map = new vv('ff'); $('\#aa').bind('click',function()\{ map.panTo(\{left:0.001,top:0.001\}) \}); map.bind('click',function(event)\{ this.popup.hide(); \}); var data = \[ \{ latLng : \[22.56821,113.9198\], title : '卖羊肉串......', info : '很多很多羊肉串啊，超级多........' \}, \{ latLng : \[22.54821,113.9298\], title : '卖猪肉串......', info : '很多很多猪肉串啊，超级多........' \}, \{ latLng : \[22.52821,113.9158\], title : '卖烧烤的......', info : '很多很卖烧烤串啊，超级多........' \}, \{ latLng : \[22.50821,113.9258\], title : '卖冷饮的', info : '冰棒,雪糕,娃哈哈。。。。。。。。。。' \} \]; $.each(data,function(i,o)\{ var latLng = new window.google.maps.LatLng(o.latLng\[0\],o.latLng\[1\]); map.setMarker(\{ latLng : o.latLng, title : o.title, events :\[ \{ event : 'mouseover', handle : function(marker)\{ this.tipShow('<div class="cc">' + o.title + '</div>',latLng); \} \}, \{ event : 'mouseout', handle : function(marker)\{ this.tipHide(); \} \}, \{ event : 'click', handle : function()\{ this.popupShow(o.info,latLng); \} \} \] \}) \}); \}); </script> </body> </html>

[google map api V3]: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html
[http_maps.google.com_maps_api_js_v_3.1_sensor_false_language_cn]: http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn
[DOM]: http://en.wikipedia.org/wiki/DOM_events