Google Maps Polyline点间单击 [英] Google Maps Polyline click between points
问题描述
使用Google Maps api 3，我有一条带有click事件的折线.我需要找出用户单击的路径中的哪两点.理想情况下是点的索引.
Using Google Maps api 3, I have a polyline with a click event. I need to find out between which two points in the path the user has clicked. Ideally the index of the points.
下面是一个示例页面，大部分直接从google文档获取，但添加了click事件.实际的应用程序具有更复杂的折线.
Below is a sample page mostly taken direct from google docs, but added the click event. The actual app has much more complex polylines.
有办法吗?
非常感谢
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polylines</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var poly = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
google.maps.event.addListener(poly, 'click', function(e) {
alert(JSON.stringify(e));
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
推荐答案
以下快速而肮脏的代码可能不是最好的，并且可以对其进行优化，但是我从那一年开始工作.
The following quick and dirty code may not be the best and can surly be optimized, but I work since year with it.
poly click事件中包含以下代码:
This code i have in the poly click event:
rc = getNearestVertex(poly, event.latLng);
x = rc.split(":"); //rc = "index:minDiff"
vertIndex = x[0] *1;
markerIndexes = vertIndex + ',' +(vertIndex + 1);
我用它在折线上的标记之前和之后标记.遵循功能:
I use it to mark the point before and the point after the marker on the polyline. Following the function:
function getNearestVertex(poly, pLatLng) {
// test to get nearest point on poly to the pLatLng point
// click is on poly, so the nearest vertex is the smallest diff between
var minDist = 9999999999;
var minDiff = 9999999999;
var path = poly.getPath();
var count = path.length || 0;
for (var n = 0; n < count - 1; n++) {
if (n == 0) {
point = path.getAt(n);
dist = g.geometry.spherical.computeDistanceBetween(pLatLng, point);
}
//g.geometry.spherical.computeDistanceBetween(aLatLng, bLatLng)
var pointb = path.getAt(n + 1);
distb = g.geometry.spherical.computeDistanceBetween(pLatLng, pointb);
distp2p = g.geometry.spherical.computeDistanceBetween(point, pointb);
var pdiff = dist + distb - distp2p;
//alert(n + " / " +dist +" + " +distb +" - " +distp2p +" = " +pdiff);
if (pdiff < minDiff) {
minDiff = pdiff.toFixed(3);
index = n;
}
point = pointb;
dist = distb;
} //-> end for
//alert(index +":" + minDiff);
return index +":" + minDiff;
} //-> end of getNearestVertex
也许有人的js和数学更好.知识可以帮助您改进代码.但是，正如我所说的那样，我骑自行车旅行的起点很少超过2-3-tsd.点
Perhaps someone with better js and math. knowledge can jump in and improve the code. However as said it works for me, whereby my track-points for my bicycle tours are very seldom over 2-3-tsd. points
这篇关于Google Maps Polyline点间单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
