点击获取折线 ID

Question

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

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

这是我的折线点击事件的监听器。它可以让它反应得很好，但我不知道如何识别“什么”点被点击，这样我就可以去获取我的额外数据。下面的示例为我提供了折线中第一个元素的 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 ); 
});

代码 sn-p：

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>

Answer 2

您可以声明一个函数，用于将侦听器添加到折线中，并在事件中传递您需要的日期

var addListenersOnPolyline = function(polyline, myJsonData) {
    google.maps.event.addListener(polyline, 'click', function (event) {
        window.open(myJsonData.myData);

    });  

当你需要时，你可以通过这种方式通过函数设置事件

addListenersOnPolyline(myActPolyline, myActJsonData );

如果你有

jsonData = JSON.parse(yourJson);
jsonData.id // should contain 1590065