Verwenden von ng-repeat mit Markierungen in ngMap

Question

Ich möchte ngMap verwenden, um Google Maps zu meiner App hinzuzufügen.

Die Demos sind "statisch" in dem Sinne, dass sie nur hart codierten HTML haben. Ich möchte, dass mein Code "dynamisch" ist in dem Sinne, dass er regelmäßig einen Server bittet, in seine Datenbank zu schauen und mir eine Menge an Koordinaten zurückzugeben, die sich mit der Zeit ändern. Ich hoffe, dass das klar ist; Wenn nicht, bitte fragen Sie nach weiteren Einzelheiten.

Ich habe die ngmap markers demo geändert, um alle zwei Sekunden einige zufällige Koordinaten zu generieren (anstatt auf meinen Server zu gehen, wie meine letzte App). Bitte sehen Sie the Plunk.

Es gibt keine Fehler in der Konsole, und es scheint, dass ngMap versucht, meine Markierungen hinzuzufügen, wie ich eine Menge von dieser Art der Sache in der Konsole sehen ...

adding marker with options, 
Object {ngRepeat: "myMarker in markers", position: O} 
clickable: true 
ngRepeat: "myMarker in markers" 
position: O 
A: 103.96749299999999 
k: 1.387454 
__proto__: O 
visible: true 
__proto__: Object 

wo K und A sind die Lat/Long, wie ich sie erwarte.

ABER ... Ich sehe keine Markierungen auf der Karte. Was mache ich falsch?

---

[Update] Eine ausgezeichnete Antwort, für die ich nachher gerne eine Prämie vergab. Für jeden, der dies liest und ngMap als @allenhwkim verwenden möchte, sagte er in einer anderen stackoverflow Frage und ich denke, in seinem Blog erstellt ngMap einfach die Karte für Sie & danach manipulieren Sie es mit dem Standard Google Maps API.

Zum Beispiel kurz vor dem Looping die Markierungen hinzuzufügen, erklärte ich
var bounds = new google.maps.LatLngBounds(); und in der Schleife, nachdem die Markierung auf die Karte hinzufügen, ich bounds.extend(latlng); und schließlich nach der Schleife, ich

var centre = bounds.getCenter(); 
$scope.map.setCenter(centre); 

Ich verzweigte die Antwort und erstellt a new Plunk um dies zu zeigen. Nicht die nützlichste Funktionalität der Welt, aber der Punkt ist nur zu zeigen, wie man $scope.map mit der Google Maps API verwendet. Nochmals vielen Dank, Allen, für ngMap.

Answer 1

Antwort ist hier

http://plnkr.co/edit/Widr0o?p=preview

Bitte denken Sie daran, dass ngMap nicht Google Maps V3 API ersetzt.

Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

Das Folgende ist Codeblock des Controllers.

// $scope.map .. this exists after the map is initialized 
var markers = []; 
for (var i=0; i<8 ; i++) { 
    markers[i] = new google.maps.Marker({ 
    title: "Hi marker " + i 
    }) 
} 
$scope.GenerateMapMarkers = function() { 
    $scope.date = Date(); // Just to show that we are updating 

    var numMarkers = Math.floor(Math.random() * 4) + 4; // betwween 4 & 8 of them 
    for (i = 0; i < numMarkers; i++) { 
    var lat = 1.280095 + (Math.random()/100); 
    var lng = 103.850949 + (Math.random()/100); 
    // You need to set markers according to google api instruction 
    // you don't need to learn ngMap, but you need to learn google map api v3 
    // https://developers.google.com/maps/documentation/javascript/marker 
    var latlng = new google.maps.LatLng(lat, lng); 
    markers[i].setPosition(latlng); 
    markers[i].setMap($scope.map) 
    }  

    $timeout(function() { 
    $scope.GenerateMapMarkers(); 
    }, 2000); // update every 2 seconds 
}; 

$scope.GenerateMapMarkers();  

Answer 2

Warum nicht so etwas wie

<map zoom="2" center="[40.74, -74.18]"> 
    <marker position="{{destination.position}}" ng-repeat="destination in destinations"></marker> 
</map> 

Wenn Sie ng-Wiederholung zu fragen, die funktionieren würde. Und Sie würden die Ziele mit einem einfachen HTTP-Aufruf zu Ihrem Back-End bevölkern:

$http.get(url + '/destinations', config).success(function (data) { 
    if (data != null && data.total > 0) { 
     $scope.destinations = data.destinations; 
    } else { 
     $scope.destinations = [] 
    } 
});