更新添加日志：在1.1的基础上添加marker的文字显示、测距工具。

  1. /**
  2.  * GOOGLE地图开发使用工具
  3.  * @author BOONYACHENGDU@GMAIL.COM
  4.  * @date 2013-08-23
  5.  * @notice 地图容器的z-index不能小于0，否则鼠标地图无法进行地图操作（可以看到地图，不过你会万分苦恼）
  6.  */
  7. (function(){
  8.     window.map={};
  9.     window.lineFeature=null;
  10.     window.markers=[];
  11.     window.infoWindow=null;
  12.     window.GoogleUtil={};
  13.     GoogleUtil={
  14.         CONSTANT:{
  15.             mapkey:'AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k',
  16.             container:"map",
  17.             DEFAULT_ZOOM:12,
  18.             zoomAddFeature:19,
  19.             centerLat:30.65721817,
  20.             centerLng:104.06594494,
  21.             mapstatus:false,
  22.             isnewMap:false,
  23.             ZOOM_MAX:19,
  24.             ZOOM_MIN:0,
  25.             markerSize:32
  26.         },
  27.         /**
  28.          * 控制地图显示范围为中国
  29.          */
  30.         mapShowBounds:function(){
  31.             var strictBounds = new google.maps.LatLngBounds(
  32.                 new google.maps.LatLng(14.48003790418668, 66.28120434863283),
  33.                 new google.maps.LatLng(54.44617552862156, 143.71284497363283)
  34.             );
  35.             google.maps.event.addListener(map, 'dragend',function() {
  36.                 if (strictBounds.contains(map.getCenter())) {
  37.                     return;
  38.                 }
  39.                 var c = map.getCenter(),
  40.                 x = c.lng(),
  41.                 y = c.lat(),
  42.                 maxX = strictBounds.getNorthEast().lng(),
  43.                 maxY = strictBounds.getNorthEast().lat(),
  44.                 minX = strictBounds.getSouthWest().lng(),
  45.                 minY = strictBounds.getSouthWest().lat();
  46.                 if (x < minX){x = minX;}
  47.                 if (x > maxX){x = maxX;}
  48.                 if (y < minY){y = minY;}
  49.                 if (y > maxY){y = maxY;}
  50.                 map.setCenter(new google.maps.LatLng(y, x));
  51.             });
  52.         },
  53.         /**
  54.          * 控制地图的缩放级别
  55.          */
  56.         limitShowMapZoom:function(zoom){
  57.             this.CONSTANT.zoomMax=zoom;
  58.             var limitedZoom=this.CONSTANT.zoomMax;
  59.             google.maps.event.addListener(map, 'zoom_changed',function() {
  60.                 if (map.getZoom() < limitedZoom){map.setZoom(limitedZoom);}
  61.             });
  62.         },
  63.         /**
  64.          * 异步加载谷歌API
  65.          */
  66.         loadScript:function(){
  67.             var script = document.createElement("script");
  68.             script.type = "text/javascript";
  69.             script.src = "http://maps.googleapis.com/maps/api/js?v=3&key="+this.CONSTANT.mapkey+"&sensor=false&libraries=drawing,places";
  70.             document.body.appendChild(script);
  71.         },
  72.         /**
  73.          * 谷歌街道
  74.          */
  75.         initStreetMap:function(key){
  76.           this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
  77.           var mapOptions = {
  78.                 center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
  79.                 zoom: this.CONSTANT.DEFAULT_ZOOM,
  80.                 panControl: true,
  81.                 zoomControl: true,
  82.                 mapTypeControl: false,
  83.                 scaleControl: true,
  84.                 scrollwheel:true,
  85.                 draggable:true,
  86.                 overviewMapControl: true,
  87.                 streetViewControl:true,
  88.                 mapTypeId: google.maps.MapTypeId.ROADMAP,
  89.                 navigationControlOptions: {
  90.                         style: google.maps.NavigationControlStyle.ZOOM_PAN,
  91.                         position: google.maps.ControlPosition.TOP_LEFT
  92.                 },
  93.                 zoomControlOptions:{
  94.                      style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL
  95.                      position: google.maps.ControlPosition.TOP_LEFT
  96.                 }
  97.             };
  98.             map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
  99.             //测距控件
  100.             GoogleUtil.control.addRulerControl();
  101.             //清除测距
  102.             GoogleUtil.control.addClearRulerOverlayControl();
  103.         },
  104.         /**
  105.          * 谷歌卫星
  106.          */
  107.         initSatelliteMap:function(key){
  108.             this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
  109.             var mapOptions = {
  110.                     center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
  111.                     zoom: this.CONSTANT.DEFAULT_ZOOM,
  112.                     panControl: true,
  113.                     zoomControl: true,
  114.                     mapTypeControl: false,
  115.                     scrollwheel:true,
  116.                     draggable:true,
  117.                     scaleControl: true,
  118.                     overviewMapControl: true,
  119.                     mapTypeId: google.maps.MapTypeId.SATELLITE,
  120.                     navigationControlOptions: {
  121.                         style: google.maps.NavigationControlStyle.ZOOM_PAN,
  122.                         position: google.maps.ControlPosition.TOP_LEFT
  123.                     },
  124.                     zoomControlOptions:{
  125.                          style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL
  126.                          position: google.maps.ControlPosition.TOP_LEFT
  127.                     }
  128.                 };
  129.             map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
  130.  
  131.             //测距控件
  132.             GoogleUtil.control.addRulerControl();
  133.             //清除测距
  134.             GoogleUtil.control.addClearRulerOverlayControl();
  135.         },
  136.         /**
  137.          * 谷歌手机
  138.          */
  139.         initMobileStreetMap:function(container,key){
  140.              this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
  141.               var mapOptions = {
  142.                     center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
  143.                     zoom: this.CONSTANT.DEFAULT_ZOOM,
  144.                     panControl: false,
  145.                     zoomControl: true,
  146.                     mapTypeControl: false,
  147.                     scaleControl: true,
  148.                     scrollwheel:true,
  149.                     draggable:true,
  150.                     overviewMapControl: true,
  151.                     streetViewControl:true,
  152.                     mapTypeId: google.maps.MapTypeId.ROADMAP,
  153.                     navigationControlOptions: {
  154.                             style: google.maps.NavigationControlStyle.ZOOM_PAN,
  155.                             position: google.maps.ControlPosition.TOP_LEFT
  156.                     },
  157.                     zoomControlOptions:{
  158.                          style: google.maps.ZoomControlStyle.SMALL,//DEFAULT,LARGE,SMALL
  159.                          position: google.maps.ControlPosition.TOP_LEFT
  160.                     }
  161.                 };
  162.                 map = new google.maps.Map(document.getElementById(container||this.CONSTANT.container),mapOptions);
  163.                 //this.mapShowBounds();
  164.         },
  165.         /**
  166.          * 居中或缩放
  167.          */
  168.         centerAndZoom:function(latlng,zoom){
  169.             if(latlng){map.setCenter(latlng);}
  170.             if(zoom){map.setZoom(zoom);}
  171.         },
  172.         /**
  173.          * 获取图片对象
  174.          */
  175.         getIcon:function(imageUrl,size){
  176.             var imgSize=size||32;
  177.             var offSize=imgSize/2;
  178.             var defaultSize=new google.maps.Size(imgSize, imgSize);
  179.             var myIcon={
  180.                     url: imageUrl,
  181.                     size: defaultSize,
  182.                     scaledSize:new google.maps.Size(imgSize,imgSize),
  183.                     origin: new google.maps.Point(0,0),
  184.                     anchor: new google.maps.Point(offSize,offSize)
  185.             };
  186.             return myIcon;
  187.         },
  188.         /**
  189.          * 居中并缩放
  190.          */
  191.         centerAndZoom:function(point,zoom){
  192.             map.setCenter(point);
  193.             map.setZoom(zoom);
  194.         },
  195.         /**
  196.          * 创建一个地图bounds对象
  197.          * @param points
  198.          */
  199.         createBounds:function(points){
  200.             if(points) {
  201.                 var bounds=new google.maps.LatLngBounds();
  202.                 for ( var i = 0; i < points.length; i++) {
  203.                     var point=points[i];
  204.                     if(point){
  205.                         bounds.extend(point);
  206.                     }
  207.                 }
  208.                 return bounds;
  209.             }
  210.             return null;
  211.         },
  212.         /**
  213.          * 设置适合的地图边界范围Bounds
  214.          * @param points
  215.          */
  216.         panToBounds:function(points){
  217.             if(points){
  218.                 var bounds=this.createBounds(points);
  219.                 if(bounds){map.panToBounds(bounds);}
  220.             }
  221.         },
  222.         /**
  223.          * 设置合适的覆盖物显示范围(覆盖物聚合)
  224.          */
  225.         getViewport:function(points){
  226.             if(points){
  227.                 var bounds=this.createBounds(points);
  228.                 if(bounds) {
  229.                     map.fitBounds(bounds);
  230.                 }
  231.             }
  232.         },
  233.         /**
  234.          * 点越界处理
  235.          * @param point
  236.          */
  237.         ifOutBoundsPantoCenter:function(point){
  238.             var bounds=map.getBounds();
  239.             var flag=bounds.contains(point);
  240.             if(flag==false){
  241.                 map.panTo(point);
  242.                 this.centerAndZoom(point, map.getZoom());
  243.             }
  244.         }
  245.     };
  246.  
  247.     var iterator=0,scount=0,playStatus=0;
  248.  
  249.     GoogleUtil.tools={
  250.         /**
  251.          * 创建信息窗体
  252.          */
  253.         createInfoWindow:function(latlng,htmlContent){
  254.             var infowindow = new google.maps.InfoWindow({
  255.                   content: htmlContent,
  256.                   position:latlng,
  257.                   disableAutoPan:false
  258.               });
  259.             return infowindow;
  260.         },
  261.         /**
  262.          * 添加信息窗体
  263.          */
  264.         addInfoWindow:function(latlng,htmlContent,isCenter){
  265.             if(!infoWindow){
  266.                 infoWindow=this.createInfoWindow(latlng, htmlContent);
  267.             }else{
  268.                 infoWindow.close();
  269.                 infoWindow.setPosition(latlng);
  270.                 infoWindow.setContent(htmlContent);
  271.             }
  272.             infoWindow.open(map);
  273.             if(isCenter){map.setCenter(latlng);}
  274.         },
  275.         /**
  276.          * 创建普通标注
  277.          */
  278.         createMarker:function(id,title,point,icon){
  279.             var marker = new google.maps.Marker({
  280.                 position: point,
  281.                 map: map,
  282.                 icon:icon,
  283.                 id:id
  284.              });
  285.              marker.id=id;
  286.              marker.setTitle(title);
  287.             return marker;
  288.         },
  289.         /**
  290.          * 创建带有文本描述的标注
  291.          */
  292.         createMarkerWithLabel:function(id,title,point,icon){
  293.             var marker = new MarkerWithLabel({
  294.                 position: point,
  295.                 draggable: false,
  296.                 map: map,
  297.                 labelContent: title,
  298.                 labelAnchor: new google.maps.Point(-1, 15),
  299.                 labelClass: "labels",
  300.                 labelStyle: {opacity: 1.0,borderColor:'green',color:'navy',fontSize:'12px'},
  301.                 icon: icon
  302.              });
  303.             marker.id=id;
  304.             return marker;
  305.         },
  306.         /**
  307.          * 添加普通标注
  308.          */
  309.          addCommonMarker:function(id,title,point,icon){
  310.             var marker =this.createMarker(id, title, point, icon);
  311.             markers.push(marker);
  312.             marker.setMap(map);
  313.             return marker;
  314.          },
  315.          /**
  316.           * 添加文本标注
  317.           */
  318.          addMarkerWithLabel:function(id,title,point,icon){
  319.              var marker =this.createMarkerWithLabel(id, title, point, icon);
  320.              markers.push(marker);
  321.              marker.setMap(map);
  322.              return marker;
  323.          },
  324.         /**
  325.          * 添加标注
  326.          */
  327.          addMarker:function(id,title,point,icon){
  328.             var marker =this.addMarkerWithLabel(id, title, point, icon);
  329.             return marker;
  330.          },
  331.          /**
  332.           * 批量添加标注
  333.           */
  334.          addMarkers:function(points){
  335.              if(points){
  336.                  for ( var i = 0; i < points.length; i++) {
  337.                     var point=points[i];
  338.                     this.addMarker(point);
  339.                  }
  340.              }
  341.          },
  342.          /**
  343.           * 添加跟踪轨迹线条
  344.           */
  345.          addLineFeature:function(id,points,style){
  346.              lineFeature = new google.maps.Polyline({
  347.                   path:points,
  348.                   strokeWeight : style.strokeWeight,
  349.                   strokeColor :style.strokeColor,
  350.                   map: map
  351.              });
  352.              lineFeature.id=id;
  353.              lineFeature.track=id;
  354.              markers.push(lineFeature);
  355.              return lineFeature;
  356.          },
  357.          /**
  358.           * 添加折线(轨迹,包括起点、终点)
  359.           */
  360.          addLineFeatureAndStartAndEndPoint:function(spObj,points, startImageUrk,endImageUrk,lineStyle){
  361.              var len=points.length;
  362.              var index =len - 1;
  363.              var startPoint = points[0];
  364.              var endPoint =points[index];
  365.              var startIcon = GoogleUtil.getIcon(startImageUrk,20);
  366.              var endIcon = GoogleUtil.getIcon(endImageUrk,20);
  367.              this.addMarker("start", spObj.start, startPoint, startIcon);
  368.              this.addMarker("end", spObj.end, endPoint, endIcon);
  369.              if(len>=2){
  370.                 var d=(len/2)+"";
  371.                 d=parseInt(d);
  372.                 GoogleUtil.centerAndZoom(points[d],12);
  373.              }
  374.              this.addLineFeature("track_line",points,lineStyle);
  375.          },
  376.          /**
  377.           * 标注动画
  378.           */
  379.          markerAnimate:{
  380.              dropSetTimeout:{
  381.                  drop:function(points){
  382.                      iterator=0;
  383.                      for (var i = 0; i < points.length; i++) {
  384.                             setTimeout(function() {
  385.                                 GoogleUtil.tools.markerAnimate.dropSetTimeout.addMarker(points);
  386.                             }, i * 200);
  387.                      }
  388.                  },
  389.                  addMarker:function(points){
  390.                      markers.push(new google.maps.Marker({
  391.                             position: points[iterator],
  392.                             map: map,
  393.                             draggable: false,
  394.                             animation: google.maps.Animation.DROP
  395.                     }));
  396.                     iterator++;
  397.                  }
  398.              }
  399.          },
  400.          /**
  401.           * 轨迹操作
  402.           */
  403.          track:{
  404.              /**
  405.               * 添加轨迹线条
  406.               */
  407.              addLineTrack:function(points){
  408.                  if(points){
  409.                      var lineCoordinates=[];
  410.                      for ( var i = 0; i < points.length; i++) {
  411.                           var point=points[i];
  412.                           if(point){
  413.                               lineCoordinates.push(point);
  414.                           }
  415.                      }
  416.                      var lineSymbol = {
  417.                                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  418.                                //scale: 2,
  419.                                strokeColor: 'green'
  420.                          };
  421.                      lineFeature = new google.maps.Polyline({
  422.                            path: lineCoordinates,
  423.                            strokeColor: 'red',
  424.                            strokeWeight : 3,
  425.                            icons: [{
  426.                               icon: lineSymbol,
  427.                               offset: '0%'
  428.                                 }],
  429.                            map: map
  430.                     });
  431.                     lineFeature.id="track_line";
  432.                  }
  433.              },
  434.              /**
  435.               * 轨迹回放操作
  436.               */
  437.              operate:{
  438.                  count:0,
  439.                  object:null,
  440.                  addListener:function(){
  441.                        var animate=window.setInterval(function() {
  442.                             scount = (scount + 1) % 200;
  443.                             var icons = lineFeature.get('icons');
  444.                             icons[0].offset = (scount / 2) + '%';
  445.                             lineFeature.set('icons', icons);
  446.                             //终点停车
  447.                             if((scount / 2)>=99){
  448.                                  clearInterval(this);
  449.                             }
  450.                       }, 1000);
  451.                       this.object=animate;
  452.                  },
  453.                  play:function(){
  454.                       playStatus=1;
  455.                       scount=0;
  456.                       lineFeature.playStatus=playStatus;
  457.                       this.addListener();
  458.                  },
  459.                  continuePlay:function(){
  460.                       playStatus=3;
  461.                       lineFeature.playStatus=playStatus;
  462.                      this.addListener();
  463.                  },
  464.                  pause:function(){
  465.                       playStatus=2;
  466.                       lineFeature.playStatus=playStatus;
  467.                      if(this.object){clearInterval(this.object);}
  468.                  },
  469.                  stop:function(){
  470.                       playStatus=4;
  471.                       lineFeature.playStatus=playStatus;
  472.                      if(this.object){clearInterval(this.object);}
  473.                      scount=0;
  474.                  }
  475.              }
  476.          },
  477.          getOverlayByNodeId:function(id,value){
  478.              for (var i = 0; i < markers.length; i++) {
  479.                 var marker=markers[i];
  480.                 if(marker[id]==value){
  481.                     return marker;
  482.                 }
  483.              }
  484.              return null;
  485.          },
  486.          /**
  487.           * 删除或显示覆盖物
  488.           */
  489.          deleteOrShowMarkerOverlayers:function(map){
  490.              for (var i = 0; i < markers.length; i++) {
  491.                     if(map==null){markers[i].setVisible(false);}
  492.                     markers[i].setMap(map);
  493.              }
  494.              if(map==null){markers = [];}
  495.          },
  496.          /**
  497.           * 删除轨迹
  498.           */
  499.          deleteTrack:function(){
  500.              if(lineFeature){
  501.                  lineFeature.setVisible(false);
  502.                  lineFeature.setMap(null);
  503.              }
  504.          },
  505.          /**
  506.           * 移除所有覆盖物
  507.           */
  508.          removeAllOverlays:function(){
  509.              for (var i = 0; i < markers.length; i++) {
  510.                  markers[i].setVisible(false);
  511.                  markers[i].setMap(map);
  512.              }
  513.              markers = [];
  514.          },
  515.          /**
  516.           * 移除一个覆盖物
  517.           */
  518.          removeOverlay:function(propertyName,value){
  519.              if(value){
  520.                  for (var i = 0; i < markers.length; i++) {
  521.                      var marker=markers[i];
  522.                      if(marker[propertyName]==value){
  523.                          markers[i].setVisible(false);
  524.                          markers[i].setMap(map);
  525.                      }
  526.                  }
  527.              }
  528.              if(propertyName=="track"||propertyName=="track_line"){
  529.                  if(lineFeature){
  530.                      lineFeature.setVisible(false);
  531.                      lineFeature.setMap(null);
  532.                      lineFeature=null;
  533.                  }
  534.              }
  535.          },
  536.          /**
  537.           * 显示或隐藏标注
  538.           */
  539.          isToShowMarkers:function(markers,bool){
  540.              if(markers){
  541.                  for (var i = 0; i < markers.length; i++) {
  542.                      var marker=markers[i];
  543.                      marker.setVisible(bool);
  544.                  }
  545.              }
  546.          },
  547.          /**
  548.           * 删除轨迹覆盖物
  549.           */
  550.          removeTrackLineWithStartAndEndOverlay:function(){
  551.              this.removeOverlay("id", "track_line");
  552.              this.removeOverlay("id", "track");
  553.              this.removeOverlay("id", "start");
  554.              this.removeOverlay("id", "end");
  555.              if(lineFeature){
  556.                  lineFeature.setVisible(false);
  557.                  lineFeature.setMap(null);
  558.                  lineFeature=null;
  559.              }
  560.              this.removeAllOverlays();
  561.          }
  562.     };
  563.  
  564.     GoogleUtil.event={
  565.             /**
  566.              * 地图缩放事件
  567.              */
  568.             mapZoomChanged:function(markers,zoom){
  569.                 var listener=google.maps.event.addListener(map, 'zoom_changed', function(event) {
  570.                      if(map.getZoom()<zoom){
  571.                          var myMarkers=markers;
  572.                          GoogleUtil.tools.isToShowMarkers(markers,false);//隐藏标注
  573.                          markers=myMarkers;
  574.                      }else{
  575.                          GoogleUtil.tools.isToShowMarkers(markers,true);//显示标注
  576.                      }
  577.                  });
  578.                 return listener;
  579.             },
  580.             /**
  581.              * 点击标注事件
  582.              */
  583.             markerClick:function(marker){
  584.                 var listener=google.maps.event.addListener(marker, 'click', function(event) {
  585.                      marker.infoWindow.open(map,marker);
  586.                  });
  587.                 return listener;
  588.             },
  589.             /**
  590.              * 移除监听对象
  591.              */
  592.             removeListener:function(listener){
  593.                 google.maps.event.removeListener(listener);
  594.             }
  595.     };
  596.  
  597.     //测距变量
  598.     var polyline;
  599.     var polylinesArray = [];
  600.     //距离标记数组
  601.     var lenArray = [];
  602.     var rulerActions=[];
  603.  
  604.     GoogleUtil.control={
  605.             /**
  606.              * 测距控件
  607.              */
  608.             addRulerControl:function(){
  609.                 var RulerControl=function(rulerControlDiv, map){
  610.  
  611.                     rulerControlDiv.style.padding = '5px';
  612.  
  613.                     //  CSS 边框
  614.                     var controlUI = document.createElement('div');
  615.                     controlUI.style.backgroundColor = 'white';
  616.                     controlUI.style.color = '#888888';
  617.                     controlUI.style.borderStyle = 'solid';
  618.                     controlUI.style.borderWidth = '1px';
  619.                     controlUI.style.cursor = 'pointer';
  620.                     controlUI.style.textAlign = 'center';
  621.                     controlUI.title = '点击测量距离';
  622.                     rulerControlDiv.appendChild(controlUI);
  623.  
  624.                     // CSS 文本
  625.                     var controlText = document.createElement('div');
  626.                     controlText.style.fontFamily = 'Arial,sans-serif';
  627.                     controlText.style.fontSize = '10px';
  628.                     controlText.style.paddingLeft = '4px';
  629.                     controlText.style.paddingRight = '4px';
  630.                     controlText.innerHTML = '测距';
  631.                     controlUI.appendChild(controlText);
  632.  
  633.                     google.maps.event.addDomListener(controlUI, 'click', function() {
  634.                         //启动整个地图的click侦听
  635.                         var rule = google.maps.event.addListener(map,"click",function(event){
  636.                             var marker = new MarkerWithLabel({
  637.                                    position: event.latLng,
  638.                                    draggable: false,
  639.                                    map: map,
  640.                                    labelContent: "0.000公里",
  641.                                    labelAnchor: new google.maps.Point(-1, -1),
  642.                                    labelClass: "labels",
  643.                                    labelStyle: {opacity: 1.0},
  644.                                    icon: {}
  645.                                 });
  646.                                 //将标记压入数组
  647.                                 lenArray.push(marker);
  648.                                 //计算距离
  649.                                 var distance = GoogleUtil.control.drawOverlay();
  650.                                 marker.set("labelContent",distance);
  651.                         });
  652.                         rulerActions.push(rule);
  653.                     });
  654.                 };
  655.  
  656.                 var rulerControlDiv = document.createElement('div');
  657.                 RulerControl(rulerControlDiv, map);
  658.                 rulerControlDiv.index = 1;
  659.                 map.controls[google.maps.ControlPosition.LEFT_TOP].push(rulerControlDiv);
  660.             },
  661.             /**
  662.              * 清除测距
  663.              */
  664.             addClearRulerOverlayControl:function(){
  665.                 var RulerControl=function(rulerControlDiv, map){
  666.  
  667.                     rulerControlDiv.style.padding = '5px';
  668.  
  669.                     //  CSS 边框
  670.                     var controlUI = document.createElement('div');
  671.                     controlUI.style.backgroundColor = 'white';
  672.                     controlUI.style.color = '#888888';
  673.                     controlUI.style.borderStyle = 'solid';
  674.                     controlUI.style.borderWidth = '1px';
  675.                     controlUI.style.cursor = 'pointer';
  676.                     controlUI.style.textAlign = 'center';
  677.                     controlUI.title = '点击清除测距';
  678.                     rulerControlDiv.appendChild(controlUI);
  679.  
  680.                     // CSS 文本
  681.                     var controlText = document.createElement('div');
  682.                     controlText.style.fontFamily = 'Arial,sans-serif';
  683.                     controlText.style.fontSize = '10px';
  684.                     controlText.style.paddingLeft = '4px';
  685.                     controlText.style.paddingRight = '4px';
  686.                     controlText.innerHTML = '清除';
  687.                     controlUI.appendChild(controlText);
  688.  
  689.                     google.maps.event.addDomListener(controlUI, 'click', function() {
  690.                         while(rulerActions[0]){
  691.                             google.maps.event.removeListener(rulerActions.pop());
  692.                         }
  693.                         while(lenArray[0]){
  694.                             lenArray.pop().setMap(null);
  695.                         }
  696.                         if (polylinesArray) {
  697.                             for (i in polylinesArray) {
  698.                                 polylinesArray[i].setMap(null);
  699.                             }
  700.                             polylinesArray = [];
  701.                         }
  702.                     });
  703.                 };
  704.  
  705.                 var rulerControlDiv = document.createElement('div');
  706.                 RulerControl(rulerControlDiv, map);
  707.                 rulerControlDiv.index = 1;
  708.                 map.controls[google.maps.ControlPosition.LEFT_TOP].push(rulerControlDiv);
  709.             },
  710.             /**
  711.              * 测距绘制
  712.              */
  713.             drawOverlay:function(){
  714.                 //路线数组
  715.                 var flightPlanCoordinates = [];
  716.                 //将坐标压入路线数组
  717.                 if (lenArray) {
  718.                     for (i in lenArray) {
  719.                         flightPlanCoordinates.push(lenArray[i].getPosition());
  720.                     }
  721.                 }
  722.                 //路径选项
  723.                 var polylineOptions = {
  724.                     path : flightPlanCoordinates,
  725.                     map : map,
  726.                     strokeColor : "#FC7F43",
  727.                     strokeOpacity : 1.0,
  728.                     strokeWeight : 2
  729.                 };
  730.                 polyline = new google.maps.Polyline(polylineOptions);
  731.                 //清除原有折线路径
  732.                 if (polylinesArray) {
  733.                     for (i in polylinesArray) {
  734.                         polylinesArray[i].setMap(null);
  735.                     }
  736.                     polylinesArray = [];
  737.                 }
  738.                 polyline.setMap(map);
  739.                 polylinesArray.push(polyline);
  740.                 return ((polyline.getLength()/1000).toFixed(3) + "公里");
  741.             }
  742.  
  743.     };
  744.  
  745.     //google 测距
  746.     google.maps.LatLng.prototype.distanceFrom = function(latlng) {
  747.         var lat = [this.lat(), latlng.lat()];
  748.         var lng = [this.lng(), latlng.lng()];
  749.         var R = 6378137;
  750.         var dLat = (lat[1] - lat[0]) * Math.PI / 180;
  751.         var dLng = (lng[1] - lng[0]) * Math.PI / 180;
  752.         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);
  753.         var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  754.         var d = R * c;
  755.         return Math.round(d);
  756.     };
  757.  
  758.     google.maps.Marker.prototype.distanceFrom = function(marker) {
  759.         return this.getPosition().distanceFrom(marker.getPosition());
  760.     };
  761.  
  762.     google.maps.Polyline.prototype.getLength = function() {
  763.         var d = 0;
  764.         var path = this.getPath();
  765.         var latlng;
  766.         for (var i = 0; i < path.getLength() - 1; i++) {
  767.             latlng = [path.getAt(i), path.getAt(i + 1)];
  768.             d += latlng[0].distanceFrom(latlng[1]);
  769.         }
  770.         return d;
  771.     };
  772.  
  773. })();
  774. //window.onload= GoogleUtil.loadScript();

Google map v3 using simple tool file google.map.util.js v 1.2的更多相关文章

  1. Google map v3 using simple tool file google.map.util.js v 1.0

    /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的(div)z-inde ...

  2. Google map v3 using simple tool file google.map.util.js v 1.1

    /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于 ...

  3. 使用google map v3 api 开发地图服务

    Google Map V3 API 学习地址: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/article ...

  4. Google Maps V3 之 路线服务

    概述 您可以使用 DirectionsService 对象计算路线(使用各种交通方式).此对象与 Google Maps API 路线服务进行通信,该服务会接收路线请求并返回计算的结果.您可以自行处理 ...

  5. Google API v3 设置Icon问题处理

    1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API n ...

  6. 怎样用Google APIs和Google的应用系统进行集成(2)----Google APIs的全部的RESTFul服务一览

    上篇文章,我提到了,Google APIs暴露了86种不同种类和版本号的API.我们能够通过在浏览器里面输入https://www.googleapis.com/discovery/v1/apis这个 ...

  7. 高效率使用google,国外搜索引擎，国内顺利使用Google的另类技巧,可用谷歌镜像, 可用google学术, 如何使用robots不让百度和google收录

    Google良好的搜索和易用性已经得到了广大网友的欢迎,但是除了我们经常使用的Google网站.图像和新闻搜索之外,它还有很多其他搜索功能和搜索技巧.如果我们也能充分利用,必将带来更大的便利.这里我介 ...

  8. [Google Guava] 强大的集合工具类：java.util.Collections中未包含的集合工具

    转载的,有问题请联系我 原文链接 译文链接 译者:沈义扬,校对:丁一 尚未完成: Queues, Tables工具类 任何对JDK集合框架有经验的程序员都熟悉和喜欢java.util.Collecti ...

  9. Idea运行时Scala报错Exception in thread "main" java.lang.NoSuchMethodError:com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V

    一.情况描述 使用idea +scala+spark,运行程序代码如下: package cn.idcast.hello import org.apache.spark.rdd.RDD import ...

随机推荐

  1. java没有条件编译

    摘自http://maosidiaoxian.iteye.com/blog/1290740 条件编译绝对是一个好东西.如在C或CPP中,可以通过预处理语句来实现条件编译.代码如下: #IFDEF DE ...

  2. 用到的Python运算符

    假设变量a为10,变量b为20. 算术运算符  比较运算符 赋值运算符 逻辑运算符 运算符优先级 对于逻辑运算符,not的优先级最大,or的优先级最小.它们三个的优先级排序为:not > and ...

  3. IOS 加载中提示框

    LoadingView.h #import <Foundation/Foundation.h> @class MBProgressHUD; @interface LoadingView : ...

  4. android笔试题集2

    1.请谈一下Android系统的架构.答:Android系统采用了分层架构,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层. 2.谈谈android大众常用的五种布局.答 ...

  5. 有二级目录的IIS配置

    当项目配置文件中配置了二级目录时,如下: <!--二级目录地址--> <add key="SecondCatalog" value="/hotel&qu ...

  6. LINQ to SQL和Entity Framework对照

    LINQ to SQL和Entity Framework都是一种包括LINQ功能的对象关系映射技术.他们之间的本质差别在于EF对数据库架构和我们查询的类型实行了更好的解耦. 使用EF,我们查询的对象不 ...

  7. thinkphp的条件的多种写法

    class SelectAction extends Action{   function index(){ //thinkphp 查询语言  //         1.普通查询 //   2.区间查 ...

  8. django的路由系统

    在django生成的工程项目文件中urls.py文件用于指定路由信息 该文件默认导入以下模块 from confimport from import admin from confimport url ...

  9. 写一个Windows上的守护进程（2）单例

    写一个Windows上的守护进程(2)单例 上一篇的日志类的实现里有个这: class Singleton<CLoggerImpl> 看名字便知其意--单例.这是一个单例模板类. 一个进程 ...

  10. 在world中批量调整图片的大小

    1.Alt+F8调出vb宏  创建一个宏名字,setsize 粘贴代码后保存关闭. Sub setsize() ' ' setsize 宏 ' ' Dim iSha As InlineShape Fo ...