Google Maps - Unable Polygonen und Linienfolgen

Question

Ich baue eine Anwendung mit MEAN Stapel und Google Maps Api zu ziehen, und ich bin ein kleines Problem haben, wenn es darum geht,Polygonen und Linestrings zu zeichnen.

Ich habe eine Sammlung von Geometrien (Punkte, Polygone und LineStrings) und jedes Mal, wenn ich einen von ihnen finde, muss ich es richtig zur Karte hinzufügen.

Ich habe kein Problem, wenn es darum geht, Marker zu rendern, aber ich habe Probleme, wenn es um Polygone und LineStrings geht.

Hier ist mein Code, der die Logik der Initialisierung der Karte enthält.

// Initializes the map 
function initialize(latitude, longitude, filter) { 

    // If map has not been created... 
    if (!map) { 
     // Create a new map and place in the index.html page 
     var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 3, 
       center: new google.maps.LatLng(vm.selectedLat, vm.selectedLong) 
       }); 
    } 

    // Loop through each location in the array and place a geometry 
    locations.forEach(function (n) { 

      if(n.type === 'LineString'){ 

       console.log('LineString '+JSON.stringify(n.coords)); 
       var linestring = new google.maps.Polyline({ 
           position: n.coords, 
           map: map, 
           geodesic: true, 
           strokeColor: '#0404B4', 
           strokeOpacity: 1.0, 
           strokeWeight: 2 
           }); 

       // For each linestring created, add a listener 
       google.maps.event.addListener(linestring, 'click', function() { 
        // When clicked, open the selected linestring's message 
        n.message.open(map, linestring); 
       }); 

       linestring.setMap(map); 
      } 
      if(n.type === 'Polygon'){ 

       console.log('Polygon '+JSON.stringify(n.coords)); 
       var polygon = new google.maps.Polygon({ 
           path: n.coords, 
           geodesic: true, 
           strokeColor: '#0404B4', 
           strokeOpacity: 0.8, 
           strokeWeight: 3, 
           fillColor: '#0404B4', 
           fillOpacity: 0.35 
         }); 

       // For each polygon created, add a listener 
       google.maps.event.addListener(polygon, 'click', function() { 
        // When clicked, open the selected polygon's message 
        n.message.open(map, polygon); 
       }); 

       polygon.setMap(map); 
      } 

    }); 
}; 

Hier sind die Screenshots der beiden console.log() der Koordinaten

Wie Sie aus dem Screenshot sehen kann ich InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number

erhalten auch habe ich versucht, ohne Erfolg, zu finden eine Lösung dafür.

Warum kann ich diese Geometrien nicht zeichnen? Wie kann ich den InvalidValueError beheben?

Vielen Dank im Voraus.

Answer 1

Probleme:

• A google.maps.Polyline keine position Eigenschaft hat, hat es eine path Eigenschaft, die ein Array von google.maps.LatLngLiterals (die Sie zum position Eigenschaft sind vorbei in aussieht, was) hat.

• A google.maps.Polygon hat eine paths Eigenschaft, die ein Array von google.maps.LatLngLiterals nimmt, aber Ihre Daten sind nicht richtig (und Sie verwenden path nicht paths) formatiert. Es ist ein Array von {lat: [46.774, -48.19], lng: [46.466, -29.119]}, weder lat noch lng sind Nummern, sie sind Arrays.