Angularjs：服务和ui.router
我使用角度服务来渲染地图，并将其注入到我的控制器中。 通过使用ui.router，当我第一次转到地图页面时，地图呈现成功，但当路由到其他页面并再次返回到地图页面时，地图不会呈现，我应该刷新页面。 我使用了factory和service ，但仍然存在问题！ 任何想法？ 这是我的服务和控制器：
angular.module('app')
.service('mapService', function () {
var _map = new ol.Map({
target: 'map-canvas',
renderer: 'canvas'
});
this.map = function () {
return _map;
};
}
.controller("mapCtrl", ["$scope", "mapService", function($scope, mapService) {
var map = mapService.map();
}]);
您不应该使用服务进行DOM相关更改，并且初始化地图是DOM相关操作。 相反，使用指令为此。
看到下面的例子，我已经使用了开放图层地图和ui.router来展示如何对指令进行相同操作。
var app = angular.module('app', ['ui.router']);
app.run(function($templateCache) {
var homeHtml = '<div>' +
'<h4>Rome Page</h4>' +
'<p> this is rome </p>' +
'<div> <ol-map center="rome"></ol-map> </div>' +
'</div>';
$templateCache.put('rome.html', homeHtml);
var otherHtml = '<div>' +
'<h4>Bern Page</h4>' +
'<p> this is bern</p>' +
'<div> <ol-map center="bern"></ol-map> </div>' +
'</div>';
$templateCache.put('bern.html', otherHtml);
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/rome");
$stateProvider.state('rome', {
url: "/rome",
templateUrl: "rome.html",
controller: function($scope) {
$scope.rome = ol.proj.fromLonLat([12.5, 41.9]);
}
}).state('bern', {
url: "/bern",
templateUrl: "bern.html",
controller: function($scope) {
$scope.bern = ol.proj.fromLonLat([7.4458, 46.95]);
}
});
});
app.controller('ctrl', function($scope) {
});
app.directive('olMap', function() {
return {
restrict: 'E',
scope: {
center: '='
},
link: function(scope, ele, attr) {
scope.map = new ol.Map({
view: new ol.View({
center: scope.center,
zoom: 6
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
})
],
target: ele[0]
});
}
};
});ol-map {
width: 500px;
height: 300px;
display: block;
}
ul {
padding: 0px;
}
ul li {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<div ng-app="app">
<ul>
<li><a ui-sref="rome">Rome</a>
</li>
<li><a ui-sref="bern">Bern</a>
</li>
</ul>
<div ui-view></div>
</div>检查此插件http://angular-ui.github.io/angular-google-maps/#!/，我正在使用它，它具有用于创建Map的完整工具
链接地址: http://www.djcxy.com/p/13637.html