google-maps - 单击多段线 ID

Question

我使用的是 Google map v3，并且在我的页面上放置了一张 map 。用户从一些列表中选择一堆数据，然后我的 map 使用我的数据库中的数据进行更新，并为用户提供带有所选数据折线的 map 。使用 jquery 从数据库中检索数据并以 json 格式返回。我的代码解析 json 并绘制折线。我的 json 包含一个数据 ID、lat、lng。工作良好。

现在我希望用户能够单击其中一个折线点，我将从我的数据库中获取该数据 ID 的附加数据，但我无法确定他们单击的是哪个 ID。有没有人有快速的解决方案来识别线上点击了哪个 id？

这是我的多段线点击事件监听器。它可以让它做出很好的 react ，但我不知道如何识别“什么”点被点击了，这样我就可以去获取我的额外数据。下面的示例为我提供了多段线中第一个元素的 ID，因此我知道我正在访问数组并且事件正在触发。只需要能够定位到我点击的具体点即可。 我得到了我的 json。我的测试集有 8,349 个点，看起来像这样。

{
            "id": 1590065,
            "lat": 37.07318,
            "lng": -88.563132}
,{
            "id": 1590066,
            "lat": 37.07307,
            "lng": -88.563002}
,{
            "id": 1590067,
            "lat": 37.072967,
            "lng": -88.562875}
,{
            "id": 1590068,
            "lat": 37.07287,
            "lng": -88.56275}
,{
            "id": 1590069,
            "lat": 37.072779,
            "lng": -88.56263}
,....

然后我解析数据并将其分配给我的坐标。

vesselPathCoordinates = JSON.parse("[" + data + "]");

然后我构建我的折线。

vesselPath = new google.maps.Polyline({
    path: vesselPathCoordinates,
    strokeColor: ''#FF0000'',
    strokeOpacity: 1.0,
    strokeWeight: 1.5
});



google.maps.event.addListener(vesselPath, 'click', function( event ){
      console.log( vesselPathCoordinates[0].id ); 
        });

当用户单击线上的特定点时，我想知道他们单击的 JSON 中的 ID。换句话说，线上的纬度和经度点触发了事件。

Answer 1

您可以在直线中找到最接近点击点的点，在输入数据中查找该顶点的 id 并将其返回。

google.maps.event.addListener(vesselPath, 'click', function( event ){
  console.log(event);
  var minDist = Number.MAX_VALUE;
  for (var i=0; i<this.getPath().getLength(); i++){
    var distance = google.maps.geometry.spherical.computeDistanceBetween(event.latLng, this.getPath().getAt(i));
    if (distance < minDist) {
      minDist = distance;
      index = i;
    }
  }
  infowindow.setContent("id="+vesselPathCoordinates[index].id);
  infowindow.setPosition(this.getPath().getAt(index));
  infowindow.open(map);
  console.log( vesselPathCoordinates[0].id ); 
});

代码片段:

function initialize() {
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  vesselPath = new google.maps.Polyline({
    path: vesselPathCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 1.5,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vesselPath.getPath().getLength(); i++) {
    bounds.extend(vesselPath.getPath().getAt(i));
  }
  map.fitBounds(bounds);
  google.maps.event.addListener(vesselPath, 'click', function(event) {
    console.log(event);
    var minDist = Number.MAX_VALUE;
    for (var i = 0; i < this.getPath().getLength(); i++) {
      var distance = google.maps.geometry.spherical.computeDistanceBetween(event.latLng, this.getPath().getAt(i));
      if (distance < minDist) {
        minDist = distance;
        index = i;
      }
    }
    infowindow.setContent("id=" + vesselPathCoordinates[index].id);
    infowindow.setPosition(this.getPath().getAt(index));
    infowindow.open(map);
    console.log(vesselPathCoordinates[index].id);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

var vesselPathCoordinates = [{
  "id": 1590065,
  "lat": 37.07318,
  "lng": -88.563132
}, {
  "id": 1590066,
  "lat": 37.07307,
  "lng": -88.563002
}, {
  "id": 1590067,
  "lat": 37.072967,
  "lng": -88.562875
}, {
  "id": 1590068,
  "lat": 37.07287,
  "lng": -88.56275
}, {
  "id": 1590069,
  "lat": 37.072779,
  "lng": -88.56263
}]

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>