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

技术2026-05-01 2

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_changedcenter_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 事件。

定位自定义控件

要在地图上定位自定义控件，您可以在 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></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>

最新回复(0)