3

我正在尝试以这种方式使用 GoogleMaps 指令：

控制器方法

$scope.myMarkers = [];

$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.myMap,
        position : $event.latLng
    }));
};

更新位置.html

<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>

<div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>

地图显示完美，但在执行addMarker时我得到一个未定义的方法$scope.myMap。

4

1 回答 1

3

我相信您在控制器定义和ui-mapdiv 之间的某个位置创建了一个新范围，而正在发生的事情是在该范围而不是在控制器的范围上创建了“myMap”属性。

为避免此类问题，请为ui-map指令提供适当的模型。例如：

控制器：

$scope.model = { myMap: undefined };

HTML：

<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>

这将强制ui-map指令将地图内容存储在内部$scope.model.myMap，并且由于范围的原型继承，该$scope.model对象将在子范围内可用，但始终属于父范围 - 您的控制器的范围。

于 2013-02-18T14:22:10.677 回答