如何获得多段线上最近的标记？

-2

当我将鼠标移动到折线上时，我需要找到最近的标记。这些标记位于同一条折线上。标记是隐藏的，我想显示最接近鼠标的一个，然后显示下一个，并隐藏prev。感谢如何获得多段线上最近的标记？

// SET PATH 
     var Path = new google.maps.Polyline({ 
     geodesic: true, 
     strokeColor: '#993300', 
     strokeOpacity: 1.0, 
     strokeWeight: 4 , 
     id: 123 
     }); 
     Path.setMap(map); 

     var path = Path.getPath(); 
     data.map(function(val){ 
     path.push(new google.maps.LatLng(+val.lat, +val.lon)); 
     Path.setPath(path); 
     }) 

google.maps.event.addListener(Path, 'mousemove',function(e){ 
    console.log(e.latLng) 
})

来源

2017-03-27 SERG

什么？你的鼠标？如果标记都在同一条折线上，则它们都与折线“最接近”。 – Adam

@亚姆是的，离鼠标最近。 – SERG

分享您尝试的相关代码并指出您遇到问题的部分。 –

首先，你需要确保你需要加载时加载你的谷歌地图的JavaScript API的geometry库。

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> 
</script>

然后，当您将鼠标放在折线，循环在你的标志，并从鼠标悬停点得到所有他们的距离（因为你不知道，直到你检查他们都哪一个是最接近）。

下面是做这件事：

//your markers in an array 
var markers = []; 

google.maps.event.addListener(polyline,'mouseover',function(e) { 
    var closestMarker; 
    markers.reduce(function(carry,marker) { 
     var d = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(),e.latLng); 

     if(d < carry || carry == -1) { 
      closestMarker = marker; 
      return d; 
     } 

     return carry; 

    },-1); 

    //your marker is now in the variable closestMarker 
});

你能弄清楚如何隐藏和显示标记很容易使用Google Maps JavaScript API marker methods

如何获得多段线上最近的标记？

回答

相关问题