Abrufen der Polylinien-ID Klicken Sie auf

Question

Ich verwende Google Maps v3 und habe eine Karte auf meiner Seite platziert. Der Benutzer wählt eine Reihe von Daten aus einigen Listen aus, und dann wird meine Karte mit Daten aus meiner Datenbank aktualisiert und stellt dem Benutzer eine Karte mit einer Polylinie der ausgewählten Daten zur Verfügung. Die Daten werden mithilfe von jquery aus der Datenbank abgerufen und als json zurückgegeben. Mein Code analysiert den JSON und zeichnet die Polylinie. Mein JSON enthält eine Daten-ID, lat, lng. Funktioniert gut.

Jetzt möchte ich, dass der Benutzer auf einen der Polylinienpunkte klicken kann und ich werde zusätzliche Daten für diese Daten-ID aus meiner Datenbank bekommen, aber ich habe Probleme beim Identifizieren der ID, auf die sie geklickt haben. Hat jemand eine schnelle Lösung um herauszufinden, welche ID in der Zeile angeklickt wurde?

Dies ist mein Listener für das Klickereignis Polylinie. Es kann zwar gut reagieren, aber ich weiß nicht, wie ich herausfinden soll, "welcher" Punkt geklickt wurde, damit ich meine zusätzlichen Daten abrufen kann. Im folgenden Beispiel wird die ID des ersten Elements in meiner Polylinie angezeigt, sodass ich weiß, dass ich auf das Array zugreife und das Ereignis ausgelöst wird. Ich muss nur in der Lage sein, den spezifischen Punkt zu finden, auf den ich geklickt habe. Ich bekomme mein JSON. Mein Test-Set hat 8.349 Punkte, die so aussehen.

{ 
      "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} 
,.... 

Dann analysiere ich die Daten und weise es meine Koordinaten.

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

Dann baue ich meine Polylinie.

Wenn der Benutzer auf einen bestimmten Punkt in der Zeile klickt, möchte ich wissen, welche ID von dem JSON, auf den sie geklickt haben. Mit anderen Worten, welcher Lat- und lng-Punkt auf der Linie das Ereignis ausgelöst hat.

Answer 1

Sie können in der Linie angeklickten Punkt den nächsten Punkt fein , suchen Sie die ID dieses Eckpunkts in den Eingabedaten und geben Sie sie zurück.

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); 
}); 

Code-Schnipsel:

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

Sie eine Funktion zum Hinzufügen des listenr erklären können Sie das Datum, das Sie

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

    }); 

in Veranstaltung benötigen PolyLine vorbei und wenn Sie nedd Sie das Ereignis durch die Funktion

addListenersOnPolyline(myActPolyline, myActJsonData); 

auf diese Weise einstellen

Wenn Sie

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