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)  可以使带多位小数点精确到一位

比较赶工，功能实现但是逻辑比较混乱 各位见谅，简单提供个思路