在ngMap中使用ng-repeat和标记

Question

我想使用ngMap将谷歌地图添加到我的应用程序.

演示是"静态的",因为它们只有硬编码的HTML.我希望我的代码是"动态的",因为它会周期性地要求服务器查看其数据库并返回一堆坐标来绘制,这将随时间而变化.我希望这很清楚; 如果没有,请询​​问更多细节.

我修改了ngmap标记演示,每两秒生成一些随机的纬度/经度坐标(而不是去我的服务器,就像我的最终应用程序一样).请参阅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是Lat/Long,正如我所期望的那样.

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

---

[更新]一个很好的答案,我很高兴之后获得了赏金.对于其他读这个并且希望使用ngMap的人来说@allenhwkim在另一个stackoverflow问题中说,我认为,在他的博客上,ngMap只是为你创建地图,之后你用标准的Google Maps API来操纵它.

例如,在循环添加标记之前,我声明
var bounds = new google.maps.LatLngBounds();并在循环中,在将标记添加到地图后,我bounds.extend(latlng);和最后,在循环之后,我

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

我分叉了答案并创建了一个新的Plunk来展示这个.这不是世界上最实用的功能,但重点是展示如何使用$scope.mapGoogle Maps API.再次感谢Allen,ngMap.

Answer 1

答案在这里

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

请记住,ngMap不会取代Google Maps V3 API.

如果您有其他问题,请与我们联系.

以下是控制器的代码块.

// $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

为什么不做类似的事情

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

如果你要求ng-repeat那会起作用.您可以使用简单的http调用来填充目的地:

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