Question

我试图以这种方式使用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
    }));
};

UpdateLocation.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时得到了一个未定义的内容。

Answer 1

我相信你在控制器定义和ui-map div之间创建了一个新的范围，而且正在发生的事情是“我的地图”＃39;正在该范围内创建属性，而不是在控制器的范围内创建属性。

要避免此类问题，请为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对象将在子范围内可用但始终可用属于父范围 - 您的控制器的范围。

AngularUI - 谷歌地图 - 地图未定义

1 个答案: