google-maps - AngularUI - 谷歌地图 - map 未定义

Question

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

Controller 方法

$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>

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

Answer 1

我相信您在 Controller 定义和 ui-map div 之间的某处创建了一个新范围，并且正在发生的事情是在该范围而不是在您的范围内创建“myMap”属性 Controller 的范围。

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

Controller :

$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 指令将 map 内容存储在 $scope.model.myMap 中，并且由于范围的原型(prototype)继承，$scope.model 对象将在子范围内可用，但始终属于父范围 - 您的 Controller 范围。