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) 可以使带多位小数点精确到一位
比较赶工,功能实现但是逻辑比较混乱 各位见谅,简单提供个思路