如何獲得多段線上最近的標記？

-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

如何獲得多段線上最近的標記？

回答

相關問題