angularjs - 在 ngMap 中使用带有标记的 ng-repeat

Question

我想使用 ngMap将 Google map 添加到我的应用中。

这些演示是“静态的”，因为它们只有硬编码的 HTML。我希望我的代码是“动态的”，因为它会定期要求服务器查看其数据库并返回一堆坐标来绘制，这些坐标会随着时间而变化。我希望这很清楚；如果没有，请询​​问更多详细信息。

我修改了ngmap markers demo每两秒生成一些随机纬度/经度坐标(而不是像我的最终应用程序那样访问我的服务器)。请看 the Plunk .

控制台中没有错误，而且似乎 ngMap 正在尝试添加我的标记，因为我在控制台中看到了很多这样的事情......

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

其中 K 和 A 是我期望的纬度/经度。

但是...我在 map 上看不到任何标记。我究竟做错了什么？

[更新] 一个很好的答案，之后我很高兴地为此获得了赏金。对于其他阅读本文并希望使用 ngMap 的人，正如@allenhwkim 在另一个 stackoverflow 问题中所说，我认为，在他的博客上，ngMap 只是为您创建 map ，然后您使用标准的 Google Maps API 操作它。

例如，就在循环添加标记之前，我声明了 var bounds = new google.maps.LatLngBounds();在循环中，将标记添加到 map 后，我 bounds.extend(latlng);最后，在循环之后，我

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

我 fork 了答案并创建了 a new Plunk展示这一点。不是世界上最有用的功能，但重点是展示如何使用 $scope.map使用谷歌地图 API。再次感谢 Allen，感谢 ngMap。

Answer 1

答案在这里

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

请记住，ngMap 不会取代 Google Maps V3 API。

如果您还有其他问题，请告诉我。

以下是 Controller 的代码块。

// $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();