ポリラインIDを取得する

Question

私はGoogle Maps v3を使用しており、自分のページにマップを配置しています。ユーザーはいくつかのリストからデータの束を選択し、私の地図は私のdbのデータで更新され、選択されたデータのポリラインを持つ地図がユーザに提供されます。データはjqueryを使用してdbから取得され、jsonとして返されます。私のコードはjsonを解析し、ポリラインを描画します。私のjsonには、データID、lat、lngが含まれています。正常に動作します。

ここで、ユーザーがポリラインポイントの1つをクリックできるようにして、データベースからそのデータ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を知りたいのですか。言い換えれば、行のどの緯度と経度がイベントを引き起こしたのか。

あなたがイベント

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

    }); 

に必要と日付を渡すポリラインにあなたはlistenrを追加するための関数を宣言することができます

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

あなたが機能して、イベントを設定することができ、このようにNEDDとき

addListenersOnPolyline(myActPolyline, myActJsonData); 

ご存知の場合

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