Как реализовать Google Map от AngularUI

Я пытался использовать модуль Google-карты AngularUI, но он не работал. Вместо создания нового модуля я пытался использовать его с моим основным модулем.

Я использовал 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">

Я использовал функцию onGoogleReady в верхней части моего файла app.js и ввел зависимости в модуль 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'
])

Наконец я использовал HTML, как показано ниже на моей странице index.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
  };
}])

Простите за длинный пост. Я нуб, поэтому я подумал, что совершил глупую ошибку, поэтому мне нужно предоставить свой код. Что я сделал не так? Заранее спасибо.

Источник

1 ответ

Этот ответ является догадкой без Plunk или JSFiddle

Причины ваших ошибок:

  • Уже загружен: я предполагаю, что у вас есть <html ng-app="DSApp"> в вашем HTML-файле. Когда AngularJS загружается, это ng-app Атрибут говорит, что он автоматически загружает весь ваш документ. Это приводит к вашей ошибке "уже загружен".
  • Undefined не является функцией: когда Angular загружает документ, он пытается настроить ваш контроллер. Это происходит, скорее всего, до загрузки Карт Google. Таким образом, google.maps еще не определено, когда ваш контроллер выполняется.

Основываясь на этом ответе переполнения стека

Возможное решение:

Подключите ваш контроллер к другому модулю, который не загружается через ng-app,

Я извлек это из исходного кода для демонстрации пользовательского интерфейса Angular UI.Map:

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
    };
}]);
Источник
Другие вопросы по тегам