Карты Google не работают в AngularJS после маршрутизации

Я пишу приложение с вложением в Google Maps. Это Embed показало, прежде чем я сделал некоторую маршрутизацию, но теперь это не сработает. Это распространенная проблема с AngularJS? Если нет, то я предполагаю, что это не так, может кто-нибудь объяснить мне, что я делаю неправильно?
Вот мой код:
Карты Google не работают в AngularJS после маршрутизации

JS:

(function() { 

    mapController.$inject = ['$scope', '$routeParams']; 
    function mapController($scope, $routeParams) { 
    function initialize() { 
     var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 5 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 


    $scope.locationName = $routeParams.locationName; 
    } 

    angular.module("siteLookUpApplication").controller("mapController", mapController); 
}());

Индекс HTML:

<!DOCTYPE html> 
<html ng-app="siteLookUpApplication"> 
    <head> 
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="style.css" type='text/css'/> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script> 
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
    <script data-require="[email protected]*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="map-controller.js"></script> 
    <script src="search-controller.js"></script> 

    <title>Site ID</title> 
    </head> 

    <body link="white" vlink="white"> 
    <div class="text-center"> 
     <h1>Site Finder</h1> 
     <div ng-view></div> 
    </div> 
    </body> 
</html>

HTML Карта:

<style> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% 
    background:#fff;} 
</style> 
<div ng-controller="mapController"> 
    <div link="blue" vlink="blue"><a ng-href="#/search">Back To Search</a></div> 
    <p>Map for {{locationName}}</p> 
    <div id="map-canvas"></div>

Здесь также шлепнуть полного проекта если вам это подходит: http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=preview
Спасибо за помощь!

источник

2014-07-29 Ian Pennebaker

Я пытаюсь выяснить, что не работает. Я ныряю в плункер, но получаю несколько ошибок. Я вижу, что метод initialize() никогда не вызывается, и я вижу ссылку на mapController() в div, который не существует. Не могли бы вы дать нам более подробный комментарий о вашей конкретной ошибке? –

Инициализация вызывается в domlistener при инициализации() Я верю, и что вы имеете в виду mapController() ссылается на div, который не существует? @MarioLevrero –

И проблема с объяснением ошибки заключается в том, что на консоли не отображается ошибка. Карта просто не отображается @MarioLevrero –

Вместо использования функции google.maps.event.addDomListener для вызова функции инициализации, вы должны сделать это методом Углового. Во-первых, добавить функцию инициализации в объеме и удалить Google DomListener:

(function() { 

mapController.$inject = ['$scope', '$routeParams']; 
    function mapController($scope, $routeParams) { 
    $scope.initialize = function() { 
     var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 5 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    } 

    $scope.locationName = $routeParams.locationName; 
    } 

    angular.module("siteLookUpApplication").controller("mapController", mapController); 
}());

После этого вы можете позвонить инициализировать прямо в карте-холст DIV:

<div id="map-canvas" ng-init="initialize()"></div>

источник

2014-11-10 02:41:13

Карты Google не работают в AngularJS после маршрутизации

ответ

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