在ngMap中使用帶有標記的ng-repeat

我想使用ngMap將Google地圖添加到我的應用。在ngMap中使用帶有標記的ng-repeat

這些演示是「靜態」的，因爲它們只有硬編碼的HTML。我希望我的代碼是「動態」的，因爲它會週期性地要求服務器查看其數據庫並返回一些座標來繪製，這將隨着時間而改變。我希望這是明確的;如果沒有，請詢問更多細節。

我修改了ngmap markers demo來每隔2秒產生一些隨機緯度/經度座標（而不是去我的服務器，因爲我的最終應用會）。請參閱the 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();和循環，增加標記到地圖後，我bounds.extend(latlng);，最後，在循環後，我

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

我分叉了答案，並創建a new Plunk來顯示這一點。不是世界上最有用的功能，但重點僅僅是展示如何將$scope.map與Google Maps API結合使用。再次感謝Allen，ngMap。

來源

2014-03-13 Mawg

答案就在這裏

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

請記住，ngMap沒有取代谷歌地圖API V3。

讓我知道你是否還有其他問題。

以下是控制器的代碼塊。

// $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-13 15:26:13 allenhwkim

+1，答案和明天的200分獎金！非常感謝你，艾倫。你的ngMap對我來說似乎很完美。我只想繪製一張固定大小的地圖，然後（使用Goggle Maps API）添加和移動標記（並調用SetBounds以使地圖包含它們），更改標記工具提示，繪製PolyLines等。這是一個非常好的工具包。順便說一句，也許你應該考慮在你的例子中加入這個。在您的博客頁面上爲我想要更新「動態」地圖的人提供幾句話。 – Mawg

@Mawg，謝謝你的加分（你不應該有）。正如你所說，我添加了動態標記作爲示例文件，並希望它對許多人有用。 – allenhwkim

嗯，是的，https://rawgithub.com/allenhwkim/angularjs-google-maps/master/examples/dynamic_markers.html我還分叉你的Plunk以顯示在ngMap創建地圖後如何使用Google Maps API。我嘗試了一些Angulr谷歌地圖的解決方案，但沒有得到任何工作。然後我發現了ngMap，這是我所希望的一切。謝謝！ – Mawg

爲什麼不這樣做

<map zoom="2" center="[40.74, -74.18]"> 
    <marker position="{{destination.position}}" ng-repeat="destination in destinations"></marker> 
</map>

如果你要求NG-重複，將工作。你會用簡單的http調用你的後端來填充目的地：

$http.get(url + '/destinations', config).success(function (data) { 
    if (data != null && data.total > 0) { 
     $scope.destinations = data.destinations; 
    } else { 
     $scope.destinations = [] 
    } 
});

來源

2014-09-19 20:22:21 Vladimir

這並不適用於我..我用多邊形而不是標記試圖相同的東西，多邊形不顯示。 – yndolok

你有什麼錯誤嗎？有人出現嗎？剝下代碼，看看它什麼時候停止工作，否則我不能真正幫助太多:) – Vladimir

不用擔心，@ allenhwkim的答案爲我工作。雖然這感覺更清潔，所以我給了它一個鏡頭。 – yndolok

在ngMap中使用帶有標記的ng-repeat

回答

相關問題