更新添加日志：在1.1的基础上添加marker的文字显示、测距工具。
/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于0，否则鼠标地图无法进行地图操作（可以看到地图，不过你会万分苦恼） */ (function(){ window.map={}; window.lineFeature=null; window.markers=[]; window.infoWindow=null; window.GoogleUtil={}; GoogleUtil={ CONSTANT:{ mapkey:'AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k', container:"map", DEFAULT_ZOOM:12, zoomAddFeature:19, centerLat:30.65721817, centerLng:104.06594494, mapstatus:false, isnewMap:false, ZOOM_MAX:19, ZOOM_MIN:0, markerSize:32 }, /** * 控制地图显示范围为中国 */ mapShowBounds:function(){ var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(14.48003790418668, 66.28120434863283), new google.maps.LatLng(54.44617552862156, 143.71284497363283) ); google.maps.event.addListener(map, 'dragend',function() { if (strictBounds.contains(map.getCenter())) { return; } var c = map.getCenter(), x = c.lng(), y = c.lat(), maxX = strictBounds.getNorthEast().lng(), maxY = strictBounds.getNorthEast().lat(), minX = strictBounds.getSouthWest().lng(), minY = strictBounds.getSouthWest().lat(); if (x < minX){x = minX;} if (x > maxX){x = maxX;} if (y < minY){y = minY;} if (y > maxY){y = maxY;} map.setCenter(new google.maps.LatLng(y, x)); }); }, /** * 控制地图的缩放级别 */ limitShowMapZoom:function(zoom){ this.CONSTANT.zoomMax=zoom; var limitedZoom=this.CONSTANT.zoomMax; google.maps.event.addListener(map, 'zoom_changed',function() { if (map.getZoom() < limitedZoom){map.setZoom(limitedZoom);} }); }, /** * 异步加载谷歌API */ loadScript:function(){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?v=3&key="+this.CONSTANT.mapkey+"&sensor=false&libraries=drawing,places"; document.body.appendChild(script); }, /** * 谷歌街道 */ initStreetMap:function(key){ this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey; var mapOptions = { center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng), zoom: this.CONSTANT.DEFAULT_ZOOM, panControl: true, zoomControl: true, mapTypeControl: false, scaleControl: true, scrollwheel:true, draggable:true, overviewMapControl: true, streetViewControl:true, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_LEFT }, zoomControlOptions:{ style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL position: google.maps.ControlPosition.TOP_LEFT } }; map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions); //测距控件 GoogleUtil.control.addRulerControl(); //清除测距 GoogleUtil.control.addClearRulerOverlayControl(); }, /** * 谷歌卫星 */ initSatelliteMap:function(key){ this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey; var mapOptions = { center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng), zoom: this.CONSTANT.DEFAULT_ZOOM, panControl: true, zoomControl: true, mapTypeControl: false, scrollwheel:true, draggable:true, scaleControl: true, overviewMapControl: true, mapTypeId: google.maps.MapTypeId.SATELLITE, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_LEFT }, zoomControlOptions:{ style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL position: google.maps.ControlPosition.TOP_LEFT } }; map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions); //测距控件 GoogleUtil.control.addRulerControl(); //清除测距 GoogleUtil.control.addClearRulerOverlayControl(); }, /** * 谷歌手机 */ initMobileStreetMap:function(container,key){ this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey; var mapOptions = { center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng), zoom: this.CONSTANT.DEFAULT_ZOOM, panControl: false, zoomControl: true, mapTypeControl: false, scaleControl: true, scrollwheel:true, draggable:true, overviewMapControl: true, streetViewControl:true, mapTypeId: google.maps.MapTypeId.ROADMAP, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_LEFT }, zoomControlOptions:{ style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL position: google.maps.ControlPosition.TOP_LEFT } }; map = new google.maps.Map(document.getElementById(container||this.CONSTANT.container),mapOptions); //this.mapShowBounds(); }, /** * 居中或缩放 */ centerAndZoom:function(latlng,zoom){ if(latlng){map.setCenter(latlng);} if(zoom){map.setZoom(zoom);} }, /** * 获取图片对象 */ getIcon:function(imageUrl,size){ var imgSize=size||32; var offSize=imgSize/2; var defaultSize=new google.maps.Size(imgSize, imgSize); var myIcon={ url: imageUrl, size: defaultSize, scaledSize:new google.maps.Size(imgSize,imgSize), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(offSize,offSize) }; return myIcon; }, /** * 居中并缩放 */ centerAndZoom:function(point,zoom){ map.setCenter(point); map.setZoom(zoom); }, /** * 创建一个地图bounds对象 * @param points */ createBounds:function(points){ if(points) { var bounds=new google.maps.LatLngBounds(); for ( var i = 0; i < points.length; i++) { var point=points[i]; if(point){ bounds.extend(point); } } return bounds; } return null; }, /** * 设置适合的地图边界范围Bounds * @param points */ panToBounds:function(points){ if(points){ var bounds=this.createBounds(points); if(bounds){map.panToBounds(bounds);} } }, /** * 设置合适的覆盖物显示范围(覆盖物聚合) */ getViewport:function(points){ if(points){ var bounds=this.createBounds(points); if(bounds) { map.fitBounds(bounds); } } }, /** * 点越界处理 * @param point */ ifOutBoundsPantoCenter:function(point){ var bounds=map.getBounds(); var flag=bounds.contains(point); if(flag==false){ map.panTo(point); this.centerAndZoom(point, map.getZoom()); } } }; var iterator=0,scount=0,playStatus=0; GoogleUtil.tools={ /** * 创建信息窗体 */ createInfoWindow:function(latlng,htmlContent){ var infowindow = new google.maps.InfoWindow({ content: htmlContent, position:latlng, disableAutoPan:false }); return infowindow; }, /** * 添加信息窗体 */ addInfoWindow:function(latlng,htmlContent,isCenter){ if(!infoWindow){ infoWindow=this.createInfoWindow(latlng, htmlContent); }else{ infoWindow.close(); infoWindow.setPosition(latlng); infoWindow.setContent(htmlContent); } infoWindow.open(map); if(isCenter){map.setCenter(latlng);} }, /** * 创建普通标注 */ createMarker:function(id,title,point,icon){ var marker = new google.maps.Marker({ position: point, map: map, icon:icon, id:id }); marker.id=id; marker.setTitle(title); return marker; }, /** * 创建带有文本描述的标注 */ createMarkerWithLabel:function(id,title,point,icon){ var marker = new MarkerWithLabel({ position: point, draggable: false, map: map, labelContent: title, labelAnchor: new google.maps.Point(-1, 15), labelClass: "labels", labelStyle: {opacity: 1.0,borderColor:'green',color:'navy',fontSize:'12px'}, icon: icon }); marker.id=id; return marker; }, /** * 添加普通标注 */ addCommonMarker:function(id,title,point,icon){ var marker =this.createMarker(id, title, point, icon); markers.push(marker); marker.setMap(map); return marker; }, /** * 添加文本标注 */ addMarkerWithLabel:function(id,title,point,icon){ var marker =this.createMarkerWithLabel(id, title, point, icon); markers.push(marker); marker.setMap(map); return marker; }, /** * 添加标注 */ addMarker:function(id,title,point,icon){ var marker =this.addMarkerWithLabel(id, title, point, icon); return marker; }, /** * 批量添加标注 */ addMarkers:function(points){ if(points){ for ( var i = 0; i < points.length; i++) { var point=points[i]; this.addMarker(point); } } }, /** * 添加跟踪轨迹线条 */ addLineFeature:function(id,points,style){ lineFeature = new google.maps.Polyline({ path:points, strokeWeight : style.strokeWeight, strokeColor :style.strokeColor, map: map }); lineFeature.id=id; lineFeature.track=id; markers.push(lineFeature); return lineFeature; }, /** * 添加折线(轨迹,包括起点、终点) */ addLineFeatureAndStartAndEndPoint:function(spObj,points, startImageUrk,endImageUrk,lineStyle){ var len=points.length; var index =len - 1; var startPoint = points[0]; var endPoint =points[index]; var startIcon = GoogleUtil.getIcon(startImageUrk,20); var endIcon = GoogleUtil.getIcon(endImageUrk,20); this.addMarker("start", spObj.start, startPoint, startIcon); this.addMarker("end", spObj.end, endPoint, endIcon); if(len>=2){ var d=(len/2)+""; d=parseInt(d); GoogleUtil.centerAndZoom(points[d],12); } this.addLineFeature("track_line",points,lineStyle); }, /** * 标注动画 */ markerAnimate:{ dropSetTimeout:{ drop:function(points){ iterator=0; for (var i = 0; i < points.length; i++) { setTimeout(function() { GoogleUtil.tools.markerAnimate.dropSetTimeout.addMarker(points); }, i * 200); } }, addMarker:function(points){ markers.push(new google.maps.Marker({ position: points[iterator], map: map, draggable: false, animation: google.maps.Animation.DROP })); iterator++; } } }, /** * 轨迹操作 */ track:{ /** * 添加轨迹线条 */ addLineTrack:function(points){ if(points){ var lineCoordinates=[]; for ( var i = 0; i < points.length; i++) { var point=points[i]; if(point){ lineCoordinates.push(point); } } var lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, //scale: 2, strokeColor: 'green' }; lineFeature = new google.maps.Polyline({ path: lineCoordinates, strokeColor: 'red', strokeWeight : 3, icons: [{ icon: lineSymbol, offset: '0%' }], map: map }); lineFeature.id="track_line"; } }, /** * 轨迹回放操作 */ operate:{ count:0, object:null, addListener:function(){ var animate=window.setInterval(function() { scount = (scount + 1) % 200; var icons = lineFeature.get('icons'); icons[0].offset = (scount / 2) + '%'; lineFeature.set('icons', icons); //终点停车 if((scount / 2)>=99){ clearInterval(this); } }, 1000); this.object=animate; }, play:function(){ playStatus=1; scount=0; lineFeature.playStatus=playStatus; this.addListener(); }, continuePlay:function(){ playStatus=3; lineFeature.playStatus=playStatus; this.addListener(); }, pause:function(){ playStatus=2; lineFeature.playStatus=playStatus; if(this.object){clearInterval(this.object);} }, stop:function(){ playStatus=4; lineFeature.playStatus=playStatus; if(this.object){clearInterval(this.object);} scount=0; } } }, getOverlayByNodeId:function(id,value){ for (var i = 0; i < markers.length; i++) { var marker=markers[i]; if(marker[id]==value){ return marker; } } return null; }, /** * 删除或显示覆盖物 */ deleteOrShowMarkerOverlayers:function(map){ for (var i = 0; i < markers.length; i++) { if(map==null){markers[i].setVisible(false);} markers[i].setMap(map); } if(map==null){markers = [];} }, /** * 删除轨迹 */ deleteTrack:function(){ if(lineFeature){ lineFeature.setVisible(false); lineFeature.setMap(null); } }, /** * 移除所有覆盖物 */ removeAllOverlays:function(){ for (var i = 0; i < markers.length; i++) { markers[i].setVisible(false); markers[i].setMap(map); } markers = []; }, /** * 移除一个覆盖物 */ removeOverlay:function(propertyName,value){ if(value){ for (var i = 0; i < markers.length; i++) { var marker=markers[i]; if(marker[propertyName]==value){ markers[i].setVisible(false); markers[i].setMap(map); } } } if(propertyName=="track"||propertyName=="track_line"){ if(lineFeature){ lineFeature.setVisible(false); lineFeature.setMap(null); lineFeature=null; } } }, /** * 显示或隐藏标注 */ isToShowMarkers:function(markers,bool){ if(markers){ for (var i = 0; i < markers.length; i++) { var marker=markers[i]; marker.setVisible(bool); } } }, /** * 删除轨迹覆盖物 */ removeTrackLineWithStartAndEndOverlay:function(){ this.removeOverlay("id", "track_line"); this.removeOverlay("id", "track"); this.removeOverlay("id", "start"); this.removeOverlay("id", "end"); if(lineFeature){ lineFeature.setVisible(false); lineFeature.setMap(null); lineFeature=null; } this.removeAllOverlays(); } }; GoogleUtil.event={ /** * 地图缩放事件 */ mapZoomChanged:function(markers,zoom){ var listener=google.maps.event.addListener(map, 'zoom_changed', function(event) { if(map.getZoom()<zoom){ var myMarkers=markers; GoogleUtil.tools.isToShowMarkers(markers,false);//隐藏标注 markers=myMarkers; }else{ GoogleUtil.tools.isToShowMarkers(markers,true);//显示标注 } }); return listener; }, /** * 点击标注事件 */ markerClick:function(marker){ var listener=google.maps.event.addListener(marker, 'click', function(event) { marker.infoWindow.open(map,marker); }); return listener; }, /** * 移除监听对象 */ removeListener:function(listener){ google.maps.event.removeListener(listener); } }; //测距变量 var polyline; var polylinesArray = []; //距离标记数组 var lenArray = []; var rulerActions=[]; GoogleUtil.control={ /** * 测距控件 */ addRulerControl:function(){ var RulerControl=function(rulerControlDiv, map){ rulerControlDiv.style.padding = '5px'; // CSS 边框 var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.color = '#888888'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = '点击测量距离'; rulerControlDiv.appendChild(controlUI); // CSS 文本 var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '10px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '测距'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { //启动整个地图的click侦听 var rule = google.maps.event.addListener(map,"click",function(event){ var marker = new MarkerWithLabel({ position: event.latLng, draggable: false, map: map, labelContent: "0.000公里", labelAnchor: new google.maps.Point(-1, -1), labelClass: "labels", labelStyle: {opacity: 1.0}, icon: {} }); //将标记压入数组 lenArray.push(marker); //计算距离 var distance = GoogleUtil.control.drawOverlay(); marker.set("labelContent",distance); }); rulerActions.push(rule); }); }; var rulerControlDiv = document.createElement('div'); RulerControl(rulerControlDiv, map); rulerControlDiv.index = 1; map.controls[google.maps.ControlPosition.LEFT_TOP].push(rulerControlDiv); }, /** * 清除测距 */ addClearRulerOverlayControl:function(){ var RulerControl=function(rulerControlDiv, map){ rulerControlDiv.style.padding = '5px'; // CSS 边框 var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.color = '#888888'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = '点击清除测距'; rulerControlDiv.appendChild(controlUI); // CSS 文本 var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '10px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '清除'; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { while(rulerActions[0]){ google.maps.event.removeListener(rulerActions.pop()); } while(lenArray[0]){ lenArray.pop().setMap(null); } if (polylinesArray) { for (i in polylinesArray) { polylinesArray[i].setMap(null); } polylinesArray = []; } }); }; var rulerControlDiv = document.createElement('div'); RulerControl(rulerControlDiv, map); rulerControlDiv.index = 1; map.controls[google.maps.ControlPosition.LEFT_TOP].push(rulerControlDiv); }, /** * 测距绘制 */ drawOverlay:function(){ //路线数组 var flightPlanCoordinates = []; //将坐标压入路线数组 if (lenArray) { for (i in lenArray) { flightPlanCoordinates.push(lenArray[i].getPosition()); } } //路径选项 var polylineOptions = { path : flightPlanCoordinates, map : map, strokeColor : "#FC7F43", strokeOpacity : 1.0, strokeWeight : 2 }; polyline = new google.maps.Polyline(polylineOptions); //清除原有折线路径 if (polylinesArray) { for (i in polylinesArray) { polylinesArray[i].setMap(null); } polylinesArray = []; } polyline.setMap(map); polylinesArray.push(polyline); return ((polyline.getLength()/1000).toFixed(3) + "公里"); } }; //google 测距 google.maps.LatLng.prototype.distanceFrom = function(latlng) { var lat = [this.lat(), latlng.lat()]; var lng = [this.lng(), latlng.lng()]; var R = 6378137; var dLat = (lat[1] - lat[0]) * Math.PI / 180; var dLng = (lng[1] - lng[0]) * Math.PI / 180; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return Math.round(d); }; google.maps.Marker.prototype.distanceFrom = function(marker) { return this.getPosition().distanceFrom(marker.getPosition()); }; google.maps.Polyline.prototype.getLength = function() { var d = 0; var path = this.getPath(); var latlng; for (var i = 0; i < path.getLength() - 1; i++) { latlng = [path.getAt(i), path.getAt(i + 1)]; d += latlng[0].distanceFrom(latlng[1]); } return d; }; })(); //window.onload= GoogleUtil.loadScript();