[英]Google map doesn't show on second partial view with angularjs
我一直在關注此問題的答案/示例。 在AngularJS中初始化Google Map
我已經設置了一個正在發生的小例子。 http://plnkr.co/edit/5fN7PR
包括git repo示例。 第一次查看地圖頁面(部分)時,地圖會加載,但是如果選擇其他鏈接,然后返回地圖,則不會加載地圖。 我可以看到地圖仍然存在,因為它被稱為只是不使用id =“ map”替換div。
我不在乎地圖是否會在此階段重新初始化,我已經為不同地點的地圖設置了商店,但是沒有地圖就無法工作! 我的列表和詳細信息頁面按預期工作。 / web / place是我的silex后端的ajax調用。
<div class="container full-width" ng-view></div>
'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'});
}]);
'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;
});
'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);
}
});
<div id="map" style="width: 100%;"></div>
我已經開始使用angularjs UI。 它解決了我的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.