Question

我使用的是Google地图v3并在我的页面上放置了地图。用户从某些列表中选择一组数据，然后使用来自我的数据库的数据更新我的地图，并为用户提供包含所选数据的折线的地图。使用jquery从db检索数据并返回为json。我的代码解析json并绘制折线。我的json包含一个数据ID，lat，lng。工作良好。

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

这是我对折线点击事件的倾听者。它可以让它反应得很好，但我不知道如何识别＆＃34;什么＆＃34;点击了点，以便我可以获取我的其他数据。下面的示例为我提供了折线中第一个元素的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。换句话说，线上的lat和lng点触发了事件。

Answer 1

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

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

Answer 2

您可以将行中最近的点精确到点击的点，在输入数据中查找该顶点的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>

获取折线ID点击

2 个答案: