Google地图折线：标记包含所点击的LatLng的两个折线坐标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google地图折线：标记包含所点击的LatLng的两个折线坐标相关的知识，希望对你有一定的参考价值。
我在谷歌地图的折线有问题。
我有一条从一点到另一点的折线。当我点击折线时，我需要两端的纬度和经度。
请有人帮帮我吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps javascript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.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">
function initialize()
{
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {zoom: 2,center: myLatLng,mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [ new google.maps.LatLng(17.772323, 78.214897),
new google.maps.LatLng(28.46758, 78.027892),
new google.maps.LatLng(29.46758, 88.027892),
new google.maps.LatLng(20.46758, 97.027892),
new google.maps.LatLng(17.772323, 78.214897)
];
var flightPath = new google.maps.Polyline({path: flightPlanCoordinates,strokeColor: "#FF0000",strokeOpacity: 1.,strokeWeight: 10});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(flightPath, 'click', function()
{
//attached click event now do your logic here
this.getPath().forEach(function(el, index)
{
//infowindow.setContent('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());
alert('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());
});
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width=100%; height:60%"></div>
</body>
</html>
答案
更新：单击折线，起点和终点将在它们上面有标记。
这是做JSFiddle Demo的一种方式。基本上，使用谷歌地图的点击事件属性LatLng，我们得到鼠标点击相对于地图的位置的Lat和Lng。使用该LatLng以及折线中的点，我们可以确定直线上的目标点线是否与折线中的两个点相对应。此外，我们将不得不使用地理距离公式来计算折线和目标点中的两个相邻点是否在同一条线上。如果它们通过减去点a和目标和目标的总和并且将点b减去点a和点b的总和，则距离差应该最接近零。因此，使用this link's Geo distance formula and toRad() function，我们可以获得三点之间的距离。
更新＃2：
Q1：上面的if语句基本上扩展了Number native函数，包括toRad函数，它将数字度转换为弧度。这用于计算两个地理点之间的地理距离差异。
Q2：功能distanceBetween
使用'hasrsine'公式来计算两点之间的大圆距离 - 即地球表面上的最短距离 - 给出点之间的“如蝇 - 苍蝇”距离（忽略任何山丘！）。
if (typeof(Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
}
var markerDist;
var startPointMarker = new google.maps.Marker();
var endPointMarker = new google.maps.Marker();
var map;
function distanceBetween(lat1, lat2, lon1, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return parseFloat(d);
}
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 2,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
google.maps.event.addListener(flightPath, 'click', function(el) {
markerDist = {p1:'', p2:'', d:-1};
startPointMarker.setMap(null);
endPointMarker.setMap(null);
var curLat = el.latLng.lat();
var curLng = el.latLng.lng();
var allPoints = this.getPath().getArray();
for (var i = 0; i < allPoints.length - 1; i++) {
var ab = distanceBetween(allPoints[i].lat(), curLat, allPoints[i].lng(), curLng);
var bc = distanceBetween(curLat, allPoints[i + 1].lat(), curLng, allPoints[i + 1].lng());
var ac = distanceBetween(allPoints[i].lat(), allPoints[i + 1].lat(), allPoints[i].lng(), allPoints[i + 1].lng());
console.log(parseFloat(markerDist.d) + ' '+ Math.abs(ab+bc-ac));
if ((parseFloat(markerDist.d) == -1) || parseFloat(markerDist.d) > parseFloat(Math.abs(ab + bc - ac))) {
markerDist.p1 = allPoints[i];
markerDist.p2 = allPoints[i + 1];
markerDist.d = Math.abs(ab + bc - ac);
}
}
startPointMarker.setPosition(markerDist.p1);
endPointMarker.setPosition(markerDist.p2);
startPointMarker.setMap(map);
endPointMarker.setMap(map);
});
flightPath.setMap(map);
}
window.onload = initialize;
以上是关于Google地图折线：标记包含所点击的LatLng的两个折线坐标的主要内容，如果未能解决你的问题，请参考以下文章
如何在现有折线上计算 LatLng A 到 LatLng B？