Zeigen Sie mehrere Punkte an und verbinden Sie sie mit einer Linie für jede Persion auf der Google Map API.

Question

Ziemlich neu in der Google Maps API. Ich habe eine Reihe von Daten, die ich durchblättern und auf einer Karte darstellen möchte. Scheint ziemlich einfach, aber alle Multi-Marker-Tutorials, die ich gefunden habe, sind ziemlich komplex. Lassen Sie sich die Daten-Array-Demo für ein Beispiel verwenden:

var demoData = { 
 
    "persion": [ 
 
     { 
 
      "firstName": "Ron Souza", 
 
      "location": [ 
 
       { 
 
        "lat": "10.794", 
 
        "lng": "106.696" 
 
       }, 
 
       { 
 
        "lat": "38.874", 
 
        "lng": "-89.670" 
 
       }, 
 
       { 
 
        "lat": "35.461", 
 
        "lng": "-81.123" 
 
       } 
 
      ] 
 
     }, 
 
     { 
 
      "firstName": "Tablet Pro", 
 
      "location": [ 
 
       { 
 
        "lat": "-3.426", 
 
        "lng": "-61.787" 
 
       }, 
 
       { 
 
        "lat": "-9.796", 
 
        "lng": "-56.162" 
 
       }, 
 
       { 
 
        "lat": "-28.150", 
 
        "lng": "-60.996" 
 
       } 
 
      ] 
 
     }] 
 
}

reference image ich all dieser Punkte zeichnen möchte, wenn darauf geklickt wir einen infowindow Pop-up-Display Vornamen und die Linienpunkte anzuzeigen zu verbinden wie das Bild. Bitte helfen Sie mir

Answer 1

Sie das google.maps.Polyline-Objekt verwenden, kann ein neues Linienzug-Objekt zu erstellen und sie dann auf die Karte befestigen

var flightPlanCoordinates = [ 
     {lat: 33.808678, lng:-117.918921}, 
     {lat: 33.818038, lng: -117.928492}, 
     {lat:33.803333, lng: -117.915278}, 
     {lat:33.808038, lng: -117.928495} 
    ]; 

    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map);