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

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时，会出现未定义的情况。

- qopuir

Answer 1

我相信你的控制器定义和 ui-map div 之间有一个新的作用域被创建了，而且 '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对象将在子作用域中可用，但始终属于父控制器作用域。

- bmleite

---

成功了！！非常感谢！！我浪费了很多时间在这个问题上。但是我不理解新范围是在哪里创建的。我正在使用 angular-ui，正如文档所说的那样。 - qopuir