google Maps V3測距

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

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript"> 
        var map;
        var polyline;
        var polylinesArray = [];
        //距離標記數組
        var lenArray = [];
        //默認經緯度  22.786607, 100.977316
        var DefaultLat = 22.786607;
        var DefaultLng = 100.977316;
		//縮放級別
        var DefaultZoom = 15; //默認情況下的zoom
        
        
        //地圖初始化
        function MapInit(){
         var singapoerCenter = new google.maps.LatLng(DefaultLat, DefaultLng); //設置中心位置
         var myOptions = {
				zoom: DefaultZoom,
                center: singapoerCenter,
				//平移控件
                navigationControl: true,
				//比例尺控件
                scaleControl: true,
				//街道視圖控件
                streetViewControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         map = new google.maps.Map(document.getElementById("map"), myOptions);
         
         //爲地圖的縮放事件提供監聽器
		 //當地圖縮放級別小於默認縮放級別時回到當前設定縮放級別和原點
            google.maps.event.addListener(map, 'zoom_changed', function() {
                if (this.getZoom() < DefaultZoom) {
					CreateMarker(DefaultLat, DefaultLng, DefaultZoom);
                }
            });
         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 = "http://www.google.com/mapfiles/dd-start.png";
         }else{
			  if(lenArray.length>=2){
				 marker.setMap(null);
			  }
			  var icon = "http://labs.google.com/ridefinder/images/mm_20_red.png";
         }
         //標記選項
         var myOptions = {
			  position : location,
			  draggable :true,
			  map : map,
			  icon : icon
         };     
         marker = new google.maps.Marker(myOptions);         
           //雙擊
           google.maps.event.addListener(marker,'click',function(){
				//放入marker
                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: 550px">
        </div>
    </div>
</body>
</html>

參考貼鏈接：http://blog.csdn.net/qq58758/article/details/6270305