使用NG-重复与ngMap标记 [英] Using ng-repeat with markers in ngMap

问题描述

我想用 ngMap 谷歌地图添加到我的应用程序。

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

演示是静态在某种意义上说，他们只有硬codeD HTML。我希望我的code是在这个意义上的动态，它会周期性地询问服务器查找在其数据库中，并返回我一堆坐标绘制，这将随时间而改变。我希望这是显而易见的;如果没有，请询​​问更多细节。

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标记演示产生一些随机的纬度/经度坐标，每两秒钟（而不是要我的服务器，因为我将在最后的应用程序）。请参阅的普拉克。

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?

[更新]一个很好的答案，对此我很高兴获得了奖金之后。对于任何人读这篇文章，希望为@allenhwkim在另一个计算器提问时说使用ngMap和，我想，在他的博客，ngMap只为你和功放创建地图;之后您提供标准谷歌地图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边界=新的google.maps.LatLngBounds（）; ，并在循环，增加标记到地图后，我 bounds.extend（经纬度）; ，最后，在循环后，我

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);

我分叉的答案，创建新普拉克来显示此。不是世界上最有用的功能，但问题是只是为了显示如何使用 $ scope.map 使用谷歌地图API。再次感谢，艾伦，为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.

推荐答案

答案就在这里。

<一个href=\"http://plnkr.co/edit/8jq6somlobEzpLSBzy2p?p=$p$pview\">http://plnkr.co/edit/8jq6somlobEzpLSBzy2p?p=$p$pview

请rememger的ngMap不是取代谷歌地图API V3

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

让我知道，如果您还有其他问题。

Let me know if you have further questions.

以下是控制器的code座。

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

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