web-dev-qa-db-ja.com

ngMapのマーカーでng-repeatを使用する

ngMap を使用してGoogleマップをアプリに追加したいと思います。

デモは、ハードコードされたHTMLしかないという意味で、「静的」です。定期的にサーバーにデータベースを調べて、プロットする座標の束を返すように要求するという意味で、コードを「動的」にしたいと思います。これは時間とともに変化します。それが明確であることを願っています。そうでない場合は、詳細をお尋ねください。

ngmapマーカーデモ を変更して、2秒ごとにランダムな緯度/経度座標を生成しました（最終的なアプリのようにサーバーに移動するのではありません）。 プランク を参照してください。

コンソールにエラーはありません。コンソールにこの種のことがたくさんあるので、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は、私が期待するとおりの緯度/経度です。

しかし...地図上にマーカーが表示されません。私は何が間違っているのですか？

[更新]素晴らしい答えでしたが、後で喜んで賞金を授与しました。これを読んで、@ allenhwkimが別のstackoverflowの質問で言ったように、ngMapを使用したい人は、彼のブログでngMapがマップを作成し、その後、標準のGoogle MapsAPIを使用してマップを操作すると思います。

たとえば、マーカーを追加するためにループする直前に、私は宣言しました
var bounds = new google.maps.LatLngBounds();そしてループ内で、マーカーをマップに追加した後、I bounds.extend(latlng);、そして最後に、ループの後、I

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

私は答えをフォークし、これを示すために 新しいプランク を作成しました。世界で最も便利な機能ではありませんが、重要なのは、Google Maps APIで_$scope.map_を使用する方法を示すことだけです。 ngMapをありがとう、アレン。

angularjsangularjs-ng-repeatng-mapangularjs-google-maps
8
Mawg

答えはここにあります

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

NgMapはGoogleMaps V3APIに取って代わるものではないことに注意してください。

ご不明な点がございましたら、お気軽にお問い合わせください。

以下はコントローラーのコードブロックです。

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

のようなことをしてみませんか

<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 = []
  }
});
5
Vladimir