google-maps - AngularUI - Google map - 删除标记

Question

我以这种方式使用 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>

更新 Controller

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

我可以添加新标记，并且 map 已成功更新，因为我无法删除它们。我做的是以下内容:

$scope.myMarkers.splice(0, $scope.myMarkers.length);

myMarkers数组变空，但 map 仍包含已删除的标记。看来 myMarkers将新标记推送到 myMarkers 时，数组和 map 会同步数组但不是当 myMarkers阵列被清除。

Answer 1

试试 myMarker.setMap(null) .

您仍然必须使用 Google Maps API 来完成所有工作，并没有太多魔法。唯一的原因ui-map-marker是一个指令，因此您可以轻松地将 DOM 事件连接到您的标记