google maps v3 电子地图测距

<title>google map api v3测距</title>
<link href="../../../App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
<link href="../../CustomTheme/Plugin.css" rel="stylesheet" type="text/css" />

getDistance();
        }

        function CreateMarker(lat, lng, MyGoToCommunityZoom) {

            var singapoerCenter = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: MyGoToCommunityZoom,
                center: singapoerCenter,
                navigationControl: true,
                scaleControl: true,
                streetViewControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map.setOptions(myOptions);
        }

        //距离
        function getDistance(){
         google.maps.event.addListener(map,"click",function(event){
          addMarker(event.latLng);
         });
        }

        //添加新标记
        function addMarker(location){
         if(lenArray.length==0){
          var icon = "../../../App_Themes/Default/images/dd-start.png";
         }else{

          if(lenArray.length>=2){
             marker.setMap(null);
          }
          var icon ="../../../App_Themes/Default/images/dd-end.png";
         }
         //标记选项
         var myOptions = {
          position : location,
          draggable :true,
          map : map,
          icon : icon
         };

         marker = new google.maps.Marker(myOptions);

           //双击
           google.maps.event.addListener(marker,'click',function(){
                lenArray.push(marker);
                drawOverlay();
           });

           //拖动结束事件
           google.maps.event.addListener(marker,'dragend',function(){
               lenArray.push(marker);
               drawOverlay();
           });

           lenArray.push(marker);
           drawOverlay();
       }
        //画出路径覆盖层
        function drawOverlay(){
        //路线数组
            var flightPlanCoordinates = [];
         //
         //将坐标压入路线数组
         if (lenArray) {
          for (i in lenArray) {
           flightPlanCoordinates.push(lenArray[i].getPosition());
          }
         }
         //路径选项
         var myOptions = {
          path : flightPlanCoordinates,
          map : map,
          strokeColor : "#FF0000",
          strokeOpacity : 1.0,
          strokeWeight : 2
         };
         polyline = new google.maps.Polyline(myOptions);
         //清除原有折线路径
         if (polylinesArray) {
          for (i in polylinesArray) {
           polylinesArray[i].setMap(null);
          }
          polylinesArray = [];
         }
         polyline.setMap(map);

         document.getElementById("sRes").innerHTML =(polyline.getLength()/1000).toFixed(3);
         polylinesArray.push(polyline);
        }


        google.maps.LatLng.prototype.distanceFrom = function(latlng) {
         var lat = [this.lat(), latlng.lat()]
         var lng = [this.lng(), latlng.lng()] //var R = 6371; // km (change this constant to get miles)
         var R = 6378137; // In meters
         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;
        }

         // 删除所有叠加物
         function deleteOverlays() {
            if (lenArray) {
              for (i in lenArray) {
                lenArray[i].setMap(null);
              }
              lenArray.length = 0;
            }

             //清除原有折线路径
         if (polylinesArray) {
          for (i in polylinesArray) {
           polylinesArray[i].setMap(null);
          }
          polylinesArray = [];
         }
        document.getElementById("sRes").innerHTML="0.000";
          }

</script>

</head>
<body οnlοad="MapInit()">
    <div>
        <div >
            您所在的位置>电子地图测距</div>
        <div id="search_box" class="search_box">
             
            <div id="busSearchBox">
                <span id="Span1" style="margin-left: 30px;">点击地图可跟踪您要测量的路线.
                       <input type="button" id="delMarker" οnclick="deleteOverlays();" value="清除标记" class="inputBtn" />
                       距离：<span id="sRes">0.000</span>km
                </span>
            </div>
        </div>
        <div id="map" style="width: 100%; height: 500px">
        </div>
    </div>
</body>
</html>

google maps v3 电子地图测距相关推荐

Google Maps API v3：如何删除所有标记？
本文翻译自:Google Maps API v3: How to remove all markers? In Google Maps API v2, if I wanted to remove al ...
Google Maps和GIS开发资源收集
Google Maps JQuery Maps google map是怎样工作的 Google Map API基本概念 Google Maps API编程资源大全 google map限制地图缩放级别 ...
rails pry使用_在Rails中使用Google Maps
rails pry使用地图是导航世界的方式. 他们具有检查地球上每个位置的能力,从而为路线和土壤成分等服务开辟了道路. 在本文中,我将介绍Google Maps API(和一些替代方法)并将其与Ra ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
Google Maps API V3: 通过邮编获取经纬度 Get Location (Latitude and Longitude) from Zip Cod
In this article I will explain with an example, how to get Location Coordinates i.e. Latitude and Lo ...
ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置
ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置对于一些基本的东西,google maps JavaScript api v3 文档已经讲解得足够 ...
Google Maps API V3 之图层
图层概述图层是地图上的对象,包含一个或多个单独项,但可作为一个整体进行操作.图层通常反映了您添加到地图上用于指定公共关联的对象集合.Maps API 会通过以下方法管理图层内对象的显示形式:将图层的 ...
Google maps javascript api v3 叠加层（Overlays）介绍
很多人尝试google maps api的开发,通常会涉及到在Google maps上进行标注功能的开发.Helloj2ee学习一项技术通常不在看书,而是多以帮助为主.当我看完之后,我将Overlay ...
Google Maps JavaScript API V3 叠加层
注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本.该 API 的第 2 版已根据我们的弃用政策正式弃用.欢迎您将 ...

google maps v3 电子地图测距

google maps v3 电子地图测距相关推荐

最新文章

热门文章