在 ngMap 中使用带有标记的 ng-repeat [英] Using ng-repeat with markers in ngMap

问题描述

我想使用 ngMap 将 Google 地图添加到我的应用中.

I want to use ngMap to add Google Maps to my app.

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

The demos are "static" in the sense that they have only hard coded HTML. I want my code to be "dynamic" in the sense that it will periodically ask a server to look in its database and return me a bunch of coordinates to plot, which will change with time. I hope that that is clear; if not, please ask for more detail.

我修改了 ngmap 标记演示以生成每两秒一些随机的纬度/经度坐标(而不是像我的最终应用程序那样进入我的服务器).请参阅Plunk.

I modified the ngmap markers demo to generate some random lat/long coordinates every two seconds (rather than going to my server, as my final app will). Please see the Plunk.

控制台中没有错误，似乎 ngMap 正在尝试添加我的标记，因为我在控制台中看到了很多此类内容......

There are no errors in the console, and it seems that ngMap is trying to add my markers, as I see a lot of this sort of thing in the console ...

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 是我期望的纬度/经度.

where K and A are the Lat/Long as I expect them to be.

但是……我在地图上没有看到任何标记.我究竟做错了什么?

BUT ... I don't see any markers on the map. What am I doing wrong?

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

[Update] An excellent answer, for which I gladly awarded a bounty afterwards. For anyone else reading this and wishing to use ngMap as @allenhwkim said in another stackoverflow question and, I think, on his blog, ngMap just creates the map for you & after that you manipulate it with the standard Google Maps API.

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

For instance, just before looping to add the markers, I declared
var bounds = new google.maps.LatLngBounds(); and in the loop, after adding the marker to the map, I bounds.extend(latlng); and, finally, after the loop, I

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

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

I forked the answer and created a new Plunk to show this. Not the world's most useful functionality, but the point is just to show how to use $scope.map with the Google Maps API. Thanks again, Allen, for ngMap.

推荐答案

答案在这里

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

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

Please remember that ngMap is not replacing Google Maps V3 API.

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

Let me know if you have further questions.

以下是控制器的代码块.

The following is code block of the 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();    

这篇关于在 ngMap 中使用带有标记的 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！