8

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 Maps APIでそれを操作します.

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

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

私は答えをフォークし、これを示すために新しい Plunkを作成しました。世界で最も便利な機能ではありませんが、要点は$scope.mapGoogle Maps API での使用方法を示すことです。アレン、ngMap に感謝します。

4

2 に答える 2

26

答えはこちら

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();
于 2014-03-13T15:26:13.623 に答える
5

なぜ次のようなことをしないのですか

<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 = []
  }
});
于 2014-09-19T20:22:21.387 に答える