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

Я пишу приложение, в котором есть Google Maps Embed. Эта вставка показывалась до того, как я сделал маршрутизацию, но теперь она не будет работать. Это общая проблема с 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="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script>
    <script data-require="angular-route@*" 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
Спасибо за любую помощь!


google-maps javascript angularjs angularjs-routing ng-view
person Ian Pennebaker    schedule 29.07.2014    source источник
comment
Я пытаюсь понять, что не работает. Я погружаюсь в плункер, но получаю несколько ошибок. Я вижу, что метод initialize() никогда не вызывается, и я вижу ссылку на mapController() в несуществующем div. Не могли бы вы дать нам более подробный комментарий о вашей конкретной ошибке?   -  person Mario Levrero    schedule 29.07.2014
comment
Я полагаю, что инициализация вызывается в domlistener при инициализации (), и что вы имеете в виду, что mapController () ссылается на несуществующий div? @Марио Левреро   -  person Ian Pennebaker    schedule 29.07.2014
comment
И проблема с объяснением ошибки в том, что в консоли никакой ошибки не отображается. Карта просто не отображается @MarioLevrero   -  person Ian Pennebaker    schedule 29.07.2014
comment
Использование этого слушателя никогда не инициализирует контроллер. Взгляните на stackoverflow.com /вопросы/13059284/.   -  person Mario Levrero    schedule 29.07.2014
comment
Хорошо, я добавил ng-init="initiliaze()" к тегу body. Все равно не сработает. Любые другие идеи? @Марио Левреро   -  person Ian Pennebaker    schedule 29.07.2014

Ответы (1)


arrow_upward
3
arrow_downward

Вместо того, чтобы использовать google.maps.event.addDomListener для вызова функции инициализации, вы должны сделать это способом Angular. Во-первых, добавьте функцию инициализации в область видимости и удалите 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);
}());

Затем вы можете вызвать Initialize прямо в div map-canvas:

<div id="map-canvas" ng-init="initialize()"></div>
person John Meinken    schedule 10.11.2014