Question

我试图使用AngularUI的Google地图模块，但它没有用。我试图将它与我的主模块一起使用，而不是创建一个新模块。

我使用了ng-app =“DSApp”

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="components/jquery/jquery.min.js"></script>
<script src="components/jquery/jquery.min.map"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>

//AngularUI files start here

<script src="components/angular-ui-utils/modules/event/event.js"></script>
<script src="components/angular-ui-map/src/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
<script type="text/javascript">

我在 app.js 文件的顶部使用了 onGoogleReady 功能，并在DSApp模块中注入了依赖项，如下所示。

function onGoogleReady() {  
  //cause error -> Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element
  angular.bootstrap(document.getElementById("map"), ['DSApp']);
}

var DSApp = angular.module('DSApp', [
  'ngRoute',
  'DSFilters',
  'DSServices',
  'DSDirectives',
  'DSController',
  'ui.event',
  'ui.map'
])

最后我在 index.html 页面中使用了如下所示的HTML。

<div id="map" ng-controller="MapCtrl" >
  <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</div>

我的控制器就像这样

.controller('MapCtrl', ['$scope', function MapCtrl($scope) {
  $scope.mapOptions = {
    center: new google.maps.LatLng(35.784, -78.670), //causer error -> TypeError: undefined is not a function
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
}])

对不起，很长的帖子。我是一个菜鸟所以我认为我犯了一些愚蠢的错误因此我需要提供我的代码。我做错了什么？提前谢谢。

Answer 1

这个答案是没有Plunk或JSFiddle的猜测

您的错误原因：

已经自举：我假设你的HTML文件中有<html ng-app="DSApp">。加载AngularJS时，此ng-app属性会告诉它自动引导整个文档。这会导致您“已经引导”错误。
未定义不是函数：当Angular引导文档时，它会尝试设置您的控制器。这种情况最有可能发生在Google地图加载之前。因此，当控制器执行时，尚未定义google.maps。

基于this Stack Overflow answer

可能的解决方案：

将您的控制器连接到另一个未通过ng-app启动的模块。

我从Angular UI's UI.Map demo的源代码中删除了它：

function onGoogleReady() {
    console.log("Google maps api initialized.");
    angular.bootstrap(document.getElementById("map"), ['DSApp.map']);
}

angular.module('DSApp.map', ['ui.map']).controller('MapCtrl', ['$scope', function ($scope) {
    $scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
}]);

如何实现AngularUI的谷歌地图

1 个答案: