我正在以这种方式使用AngularUI Google Maps指令:
UpdateData.html
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"></div>
<div class="control-group">
<label class="control-label">Situación</label>
<div class="controls">
<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>
</div>
</div>
UpdateController
if (!$scope.myMarkers) {
$scope.myMarkers = [];
}
if (!$scope.myMap) {
$scope.model = {
myMap: undefined
};
}
$scope.mapOptions = {
center : new google.maps.LatLng(35.784, -78.670),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function($event) {
$scope.myMarkers.push(new google.maps.Marker({
map : $scope.model.myMap,
position : $event.latLng
}));
$scope.event.lat = $event.latLng.lat();
$scope.event.lng = $event.latLng.lng();
};
我可以添加新标记,地图已成功更新,我无法删除它们。我的工作如下:
$scope.myMarkers.splice(0, $scope.myMarkers.length);
myMarkers
数组变空,但地图仍包含已删除的标记。在将新标记推送到myMarkers
数组时,似乎myMarkers
数组和映射是同步的,但在myMarkers
数组被清除时则不同步。
答案 0 :(得分:8)
尝试myMarker.setMap(null)
。
你仍然需要使用谷歌地图API来做所有事情,没有太大的魔力。 ui-map-marker
是指令的唯一原因是您可以轻松地将DOM事件与标记挂钩
答案 1 :(得分:7)
我回答自己。在执行此行之前
$scope.myMarkers.splice(0, $scope.myMarkers.length);
应该这样做:
angular.forEach($scope.myMarkers, function(marker) {
marker.setMap(null);
});