Google api 實現簡單多點測距

1.思路：雙擊地圖添加marker ，除第一個marker外 其他Marker均添加title 顯示此marker 到第一個marker距離總和；

 

 

2.實現：

 覆蓋層記錄標誌

var originArr = []; //marker 數組
var dbclickLatArr = [];//雙擊座標點數組
var station=null;//劃線函數句柄
var clickHandler=null;//雙擊監聽事件句柄

添加marker以及劃線

代碼中屏蔽掉的代碼可以實現給每個marker添加點擊出現的 info框

思路：new google.maps.Polyline 判斷之前是否劃線，有則SetPath新增的座標點數組，實現連續劃線。

$('#ce-Ju').click(function(){
	//alert("觸發測距");
	console.log("範圍添加雙擊事件監聽之前清除點");
	RestStation();
	 clickHandler=google.maps.event.addListener(stationRangeArr[0],'dblclick',function(event){
		console.log("範圍添加雙擊事件監聽");
		dbclickLatArr.push(event.latLng);
		 if(dbclickLatArr.length==1){
		 var origin = new google.maps.Marker({
			    position: event.latLng,
			    icon: origin   //圖標
			  });
		 origin.setMap(map);
		 originArr.push(origin);
	 };
	 
	 
	  if(dbclickLatArr.length>1){
			var distanceMeter=0;
			for(var i = 0;i<dbclickLatArr.length-1;i++){
				
				distanceMeter =distanceMeter+google.maps.geometry.spherical.computeDistanceBetween(dbclickLatArr[i], dbclickLatArr[i+1]);
			}
		  var origin = new google.maps.Marker({
					title: "Distances: "+distanceMeter.toFixed(1)+" metres!",
		  		position: event.latLng,
		  		icon: origin   //圖標
		  	});
		  origin.setMap(map);
		  originArr.push(origin);
// 			var contentString = '<div id="mapInfo">' +
//     '<div>' +
//     '</div>' +
//     '<div id="bodyContent">' +
//     '<p class = "mapStyle">Distances：' +distanceMeter.toFixed(1)+ ' metres'+
//     '</div>' +
//     '</div>';
// 
//     var infowindow = new google.maps.InfoWindow({
//         content: contentString,
// 
// 				
//     });
// 
//     google.maps.event.addListener(origin, 'click', function () {
//         infowindow.open(map, origin);
//     });
		  if(station == null){
		        var bermudaTriangle2 = new google.maps.Polyline({
		           path:dbclickLatArr,
		            strokeColor: '#0e50be',
		            strokeOpacity: 1,
		            strokeWeight: 5
		        });
		        //bermudaTriangle2.setMap(map);
		        station = bermudaTriangle2;
						station.setMap(map);
		  }else{
				station.setPath(dbclickLatArr);
			};
		  //station.setPath(dbclickLatArr);
		  
		 
		 
		
	  }
	});
	
});

 

PS：

“distanceMeter+google.maps.geometry.spherical.computeDistanceBetween返回的距離”.toFixed(1)  可以使帶多位小數點精確到一位

比較趕工，功能實現但是邏輯比較混亂 各位見諒，簡單提供個思路