Google Maps折线：标记包含点击的LatLng的两个折线坐标 [英] Google Maps Polyline: Mark the two Polyline coordinates that contain the clicked LatLng
问题描述
我有一个折线从一点到另一点。当我点击折线时，我需要两端的纬度和纬度。
请问有人可以帮助我吗？
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：地理编码简单< / title>
< link href =http://code.google.com/apis/maps/documentation/javascript/examples/standard.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
函数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（）
{
//附加的单击事件现在在这里执行你的逻辑
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_canvasstyle =width = 100％; height：60％>< / div>
< / body>
< / html>
Pradeep Neo请按照您的接受率工作。您可以通过点击右上角和下方投票显示的每个答案左侧的复选框来接受答案。
更新： / em> 点击折线，开始和结束点将会有标记。
这里是一种方法 JSFiddle Demo 。基本上，使用谷歌地图的点击事件属性LatLng，我们得到了与地图相关的鼠标点击位置的Lat和Lng。使用LatLng以及折线中的点，我们可以确定在折线中有两个点的直线上的目标点线。此外，我们必须使用Geo距离公式来计算折线和目标点中的两个相邻点是否在同一行上。如果他们然后通过减去点a和目标以及目标和点b之和除以点a和点b之和的距离差应该最接近于零。所以使用此链接的地理距离公式和toRad（）功能，我们可以获得三点之间的距离。
更新＃2：
Q1 ：上面的if语句基本上扩展了Number本机函数，包括将数值转换为弧度的 toRad 函数。这用于计算两个地理点之间的地理距离差。
Q2：函数 distanceBetween
使用'haversine'公式
计算两点之间的大圆距离
- 即
在地球
表面的最短距离 - 给
'as-the-crow-flyies
之间的距离（忽略任何丘陵！）。
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;
函数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）;
}
函数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），新的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;
I have a problem in polyline of google maps.
I have a polyline from one points to another point. When I click on the polyline, I need the latitude and logitude of the two ends.
Please can anyone help me?
<!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>
Pradeep Neo, please work on your accept rate. You can accept an answer by clicking on the checkbox on the left side of each answer right beneath the up and down vote display.
UPDATE: Click on the polyline and starting and end points will have markers on top of them.
Here is one way of doing it JSFiddle Demo. Basically, using google map's click event property LatLng we get the Lat and Lng of the location of the mouse click in relation to the map. Using that LatLng along with the points in the polyline we can determine if the targeted point lines on a straight line with two of the points in the polyline. Furthermore, we'll have to use Geo distance formulate to calculate if two adjacent points in the polyline and the targetted point are on the same line. If they are then by subtracting sum of point a and target and target and point b by the sum of point a and point b the distance difference should be closest to zero. So using this link's Geo distance formula and toRad() function we are able to get the distance between three points.
UPDATE #2:
Q1: The if statement above basically extends the Number native function to include toRad function which converts numeric degrees to radians. This is used to calculate the geo distance difference between two geo points.
Q2: The function distanceBetween
uses the ‘haversine’ formula to calculate great-circle distances between the two points – that is, the shortest distance over the earth’s surface – giving an ‘as-the-crow-flies’ distance between the points (ignoring any hills!).
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 Maps折线：标记包含点击的LatLng的两个折线坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
