Knockout-Objekt Literale funktionieren nicht mit Google Maps?

Question

Also habe ich ein kleines Kartenprojekt, an dem ich gerade arbeite, hat gut funktioniert, bis ich beschlossen habe, KnockoutJS für einige Dinge in den Mix zu bringen. Ich habe meine Marker über ein beobachtbares Array für die einfache Anzeige im Frontend definiert. Aber wenn ich versuche, sie aufzurufen, um Markierungen in meiner Karte zu platzieren, bekomme ich keine Markierungen angezeigt. Wenn ich die lat/lng Objektliterale in dem folgenden Code entfernen (aber die Zahlen als Teil des Arrays halten) und sie nur über

markers()[i][1] 

nennen und

markers()[i][2] 

bzw. bekomme ich die Markierungen . Haltet! Ich habe die KO-Dokumente ausgegossen und habe keine Informationen dazu gefunden. Auch keine Konsolenfehler zu werfen - haben Sie einfach keine Markierungen auf der Karte. Ich schätze jede Hilfe sehr!

var markers = ko.observableArray([ 
    [{ Name: 'Eye On Entrepreneurs' }, { lat: 45.913750 }, { lng: -89.257755 }], 
    [{ Name: 'Trigs of Eagle River' }, { lat: 45.915717 }, { lng: -89.240019 }], 
    [{ Name: 'Eagle River Airport' }, { lat: 45.934099 }, { lng: -89.261834 }] 
]); 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 45.917034, lng: -89.248168}, 
    zoom: 15, 
    disableDefaultUI: true 
    }); 

    for (i = 0; i < markers().length; i++){ 
    var position = new google.maps.LatLng(markers()[i].lat, markers()[i].lng); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers()[i].name 
    }); 
    } 
} 

Answer 1

Ich arbeite derzeit mit KnockoutJS und OracleJET in meinem Büro.

Obwohl es nicht falsch ist, habe ich bisher keinen Anwendungsfall gesehen, in dem ein observableArray mehr Arrays enthält. Wir platzieren einfach Objekte in das übergeordnete ObservableArray. Ich habe Ihren Code wie folgt geändert:

this.markers = ko.observableArray([ 
       {Name: 'Eye On Entrepreneurs', lat: 45.913750, lng: -89.257755}, 
       {Name: 'Trigs of Eagle River', lat: 45.915717, lng: -89.240019}, 
       {Name: 'Eagle River Airport', lat: 45.934099, lng: -89.261834} 
      ]); 

Es funktioniert gut.

Und Sie haben einen Tippfehler: Großbuchstaben 'n' des Namens. title: self.markers()[i].Name