单击Polyline ID

Question

我正在使用谷歌地图v3，并在我的页面上放置了一张地图。用户从某些列表中选择一组数据，然后用我的db中的数据更新我的地图，并向用户提供一个地图，其中包含所选数据的折线。使用jquery从db检索数据，并以json的形式返回。我的代码解析json并绘制折线。我的json包含一个数据ID，lat，lng。效果很好。

现在，我希望用户能够单击其中一个polyline点，我将从我的数据库中获得该数据ID的附加数据，但是我很难确定他们单击的是哪个ID。有谁有快速的解决方案来识别哪个id被点击了吗？

这是polyline单击事件的侦听器。它可以让它做出很好的反应，但是我不知道如何识别点击的“什么”点，这样我就可以得到我的额外数据。下面的示例给出了polyline中第一个元素的ID，因此我知道我正在访问数组，事件正在触发。只需要能够找到我点击的特定点。我得到了我的儿子。我的测试集有8349分，如下所示。

{
            "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。换句话说，线路上的lat和lng点触发了这一事件。

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>

​

Answer 2

您可以声明一个函数，用于向polyline添加listenr，以传递事件中所需的日期。

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