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

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

Я использовал нг-приложение = "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 
    }; 
}])

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

источник

2013-12-03 Fahad Billah

Не могли бы вы дать больше кода? Возможно, [JSFiddle] (http://jsfiddle.net) или [Plunk] (http://plnkr.co)? –

Похоже, у вас есть ng-приложение, и вы также вручную загружаете то, что вам говорит об ошибке. Не уверен в этой конкретной реализации карты Google, но в том, что я использую, нет необходимости вручную загружать углы, верьте, что вы можете использовать обновленную версию. – shaunhusain

Этот ответ догадка без шлепнуть или JSFiddle

ПРИЧИНЫ ваших ошибок:

Уже бутстрапированная: Я предполагаю, что у вас есть <html ng-app="DSApp"> в вашем HTML файл. Когда AngularJS загружается, этот атрибут ng-app сообщает ему автоматически загружать весь документ. Это приводит к вашей «уже загруженной» ошибке.
Undefined не является функцией: Когда 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 
    }; 
}]);

источник

2013-12-04 02:12:04

Спасибо, вы пояснили, как работает загрузочный механизм для меня. Nice one Tyler :-) – Robert

Спасибо, работал и на меня! –

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

ответ

Смежные вопросы