谷歌地图不显示与angularjs第二部分观点 [英] Google map doesn't show on second partial view with angularjs

问题描述

我一直在关注这里这个问题的答案/例子。
初始化谷歌地图在AngularJS

我设置的发生了什么一plunker例子。 http://plnkr.co/edit/5fN7PR

包括混帐回购协议的例子。当我第一次查看地图页面（部分）我的地图加载但是如果我选择另一个链接然后返回到地图地图不加载。我可以看到地图上仍然存在的呼吁其存在的只是没有使用id =地图取代股利。

我不在乎，地图将被重新初始化在这个阶段，我设置的地图不同的地方商店，但这不会没有地图的工作！我的名单和详细信息页面正常工作。 /网络/地方是一个Ajax调用我的硅石后端。

的index.html

 ＆LT; D​​IV CLASS =集装箱全角NG-视图＆gt;＆LT; / DIV＆GT;
 

app.js

 使用严格的;/ *应用程序模块* /
VAR应用= angular.module（'地方'，['控制器'，'过滤器'，'服务']）;的app.config（['$ routeProvider'，函数（$ routeProvider）{
  $ routeProvider。
      当（'/地方'，{templateUrl：'谐音/位-list.html'，控制器：'ListController'}）。
      当（'/地方/：placeId /详细信息，{templateUrl：'谐音/布局detail.html'，控制器：'DetailController'}）。
      当（'/地方/：placeId /图'，{templateUrl：'谐音/布局map.html'，控制器：'MapController'}）。
      否则（{redirectTo：'/地方'}）;
}]）;
 

controllers.js

 使用严格的;/ * *控制器/
VAR控制器;
控制器= angular.module（控制器，[]）;controllers.controller（ListController功能（$范围，地方）{
    $ scope.places = Place.query（）;
}）;controllers.controller（DetailController功能（$范围，$ routeParams，地方）{
    $ scope.place = Place.get（{placeId：$ routeParams.placeId}）;
}）;controllers.controller（MapController功能（$范围，$ routeParams，广场的GoogleMaps）{
    $ scope.place = Place.get（{placeId：$ routeParams.placeId}）;
    $ scope.map =的GoogleMaps;
}）;
 

services.js

 使用严格的;/* 服务 */
VAR服务;服务= angular.module（'服务'，['ngResource']）;services.factory（'广场'，函数（$资源）{
    返回$资源（'/网络/地点/：placeId'，{}，{
        查询：{方法：GET，则params：{placeId：'名单'}，IsArray的：真正}
    }）;
}）;
services.factory（'的GoogleMaps'，函数（）{
    VAR MAP_ID ='#map';
    VAR纬度= -25;
    VAR LNG = 133;
    VAR变焦= 16;
    VAR地图=初始化（MAP_ID，纬度，经度，缩放）;    的console.log（图）
    返回地图;    函数初始化（MAP_ID，纬度，经度，变焦）{
        VAR myOptions = {
            变焦：变焦，
            中心：新google.maps.LatLng（纬度，经度）
            mapTypeId设为：google.maps.MapTypeId.ROADMAP
        };        的console.log（myOptions）;        返回新google.maps.Map（$（MAP_ID）[0]，myOptions）;
    }
}）;
 

布局map.html

 ＆LT; D​​IV ID =地图的风格=宽度：100％;＆GT;＆LT; / DIV＆GT;
 

解决方案

我使用angularjs UI开始。它解决了我的问题。

I've been following the answers/examples in this question here. Initialize Google Map in AngularJS

I've setup a plunker example of whats happening. http://plnkr.co/edit/5fN7PR

Including the git repo example. My map loads when I first view the map page (partial) however if I select another link then go back to the map the map doesn't load. I can see the map still exists as its being called its just not replacing the div with id="map".

I don't care that the map will be reinitialized at this stage, I've setup a store for the maps for different places, however that won't work without the map! My list and details pages work as expected. /web/place is a ajax call to my silex backend.

index.html

<div class="container full-width" ng-view></div>

app.js

'use strict';

/* App Module */
var app = angular.module('places', ['Controllers', 'Filters', 'Services']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/places', {templateUrl: 'partials/place-list.html',   controller: 'ListController'}).
      when('/places/:placeId/details', {templateUrl: 'partials/place-detail.html', controller: 'DetailController'}).
      when('/places/:placeId/map', {templateUrl: 'partials/place-map.html', controller: 'MapController'}).
      otherwise({redirectTo: '/places'});
}]);

controllers.js

'use strict';

/* Controllers */
var controllers;
controllers = angular.module("Controllers", []);

controllers.controller("ListController", function($scope, Place) {
    $scope.places = Place.query();
});

controllers.controller("DetailController", function($scope, $routeParams, Place) {
    $scope.place = Place.get({placeId: $routeParams.placeId});
});

controllers.controller("MapController", function($scope, $routeParams, Place, GoogleMaps) {
    $scope.place = Place.get({placeId: $routeParams.placeId});
    $scope.map = GoogleMaps;
});

services.js

'use strict';

/* Services */
var services;

services = angular.module('Services', ['ngResource']);

services.factory('Place', function($resource){
    return $resource('/web/place/:placeId', {}, {
        query: {method:'GET', params:{placeId:'list'}, isArray:true}
    });
});


services.factory('GoogleMaps', function() {
    var map_id  = '#map';
    var lat     = -25;
    var lng     = 133;
    var zoom    = 16;
    var map     = initialize(map_id, lat, lng, zoom);

    console.log(map);
    return map;

    function initialize(map_id, lat, lng, zoom) {
        var myOptions = {
            zoom : zoom,
            center : new google.maps.LatLng(lat, lng),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        console.log(myOptions);

        return new google.maps.Map($(map_id)[0], myOptions);
    }
});

place-map.html

<div id="map" style="width: 100%;"></div>

解决方案

I've started using angularjs UI. It has solved my problem.

这篇关于谷歌地图不显示与angularjs第二部分观点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！