我使用angular-google-maps模块实现了一个非常基本的地图。页面处理完所有脚本后,我总会找到一个" TypeError:undefined不是函数"登录Chrome开发者工具控制台,即使一切似乎都按预期工作。
在$scope.control.getGMap().fitBounds($scope.bounds);
承诺函数中调用uiGmapIsReady
时会发生这种情况。
angular.module('app', ['uiGmapgoogle-maps'])
.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: 3.17,
libraries: 'weather,geometry,visualization'
});
})
.controller('MainController', ['$scope', '$timeout', 'uiGmapGoogleMapApi', 'uiGmapIsReady', function ($scope, $timeout, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.markers = [
{ latitude: 33.970675, longitude: -118.454618},
{ latitude: 33.980675, longitude: -118.454618},
{ latitude: 33.974246, longitude: -118.455458}
]
uiGmapGoogleMapApi.then(function (maps) {
$scope.bounds = new maps.LatLngBounds();
angular.forEach($scope.markers, function (value, key) {
var myLatLng = new maps.LatLng($scope.markers[key].latitude, $scope.markers[key].longitude);
$scope.bounds.extend(myLatLng);
});
$scope.map = { center: { latitude: $scope.bounds.getCenter().lat(), longitude: $scope.bounds.getCenter().lng() }, zoom: 5 };
$scope.map.options = { MapTypeId: maps.MapTypeId.HYBRID };
});
$scope.control = {};
uiGmapIsReady.promise().then((function (maps) {
$scope.control.getGMap().fitBounds($scope.bounds);
}));
$scope.refreshMap = function () {
$scope.control.refresh({ latitude: $scope.bounds.getCenter().lat(), longitude: $scope.bounds.getCenter().lng() });
}
$scope.streetZoom = function () {
$scope.control.getGMap().setZoom(14);
}
}])
这是标记
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
options="map.options"
control="control">
<ui-gmap-marker idkey="$index" coords="item" ng-repeat="item in markers track by $index">
<ui-gmap-window options="windowOptions" closeclick="closeClick()">
<p class="google-window">{{item.latitude}}, {{item.longitude}}</p>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
以下是错误消息:
TypeError: undefined is not a function angular.js:11655
任何关于为什么会发生这种情况的见解将非常感激!我觉得我已经破坏了一些东西并且不知道为什么。