Question

当我将鼠标移到折线上时，我需要获取最近的标记。标记位于同一折线上。标记是隐藏的，我想显示最靠近鼠标的标记，然后显示下一个标记并隐藏上一个标记。感谢

    // 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)
})

Answer 1

首先，您需要确保在加载Google地图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

找出如何轻松隐藏和显示标记的方法

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

1 个答案: