在ngMap中将ng-repeat与标记一起使用

一尘不染

在ngMap中将ng-repeat与标记一起使用

angularjs

我想使用ngMap将Google
Maps添加到我的应用程序中。

演示是“静态的”，因为它们只有硬编码的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是我期望的纬度/经度。

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

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

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

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

我给出了答案，并创建了一个新的Plunk来展示这一点。这不是世界上最有用的功能，但重点只是说明如何$scope.map与Google
Maps API 一起使用。再次感谢Allen，感谢ngMap。

阅读 274

2020-07-04

共1个答案

一尘不染

答案在这里

http://plnkr.co/edit/Widr0o?p=预览

请记住，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();

2020-07-04