Lar*_*tel 27 google-maps angularjs
我正在考虑从backbonejs迁移到angularjs.
在骨干网中,我能够初始化一个视图,此时我创建了一个谷歌地图实例.然后我可以平移/缩放/等并在视图之间切换而不会丢失地图的当前状态.
鉴于以下使用angularjs:
的layout.html
<body>
<div class="container-fluid" ng-view></div>
map.html
<div id="map_canvas" ng-controller="MapCtrl"></div>
我能够创建一个指令来渲染地图就好了.问题是每次切换回地图视图时它都会重新加载地图.
<map></map>
因此,根据我对Angular的了解,我想我会创建一个MapController并在那里初始化地图.没有成功.
最重要的是我需要异步初始化谷歌地图并将数据推送到本地或远程并且能够导航应用程序而无需每次从头开始重新映射地图.
有人可以提出正确的方法吗？
谢谢 :)
尝试Per Andy Joslin的建议:
在app.js中:
// Generated by CoffeeScript 1.3.3
(function() {
"use strict";
angular.module("ofm", ["ofm.filters", "GoogleMaps", "ofm.directives"]).config([
"$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider.when("/", {
templateUrl: "partials/home"
}).when("/map", {
templateUrl: "partials/map",
controller: MapCtrl
}).otherwise({
redirectTo: "/"
});
return $locationProvider.html5Mode(true);
}
]);
}).call(this);
在services.js中:
angular.module('GoogleMaps', []).
factory('wasMapInitialized', function() {
console.log("inside service");
var maps = 0;
if (!maps) {
maps += 1;
return 0;
} else {
return 1;
}
});
在controllers.js中:
function MapCtrl($scope) {
if (!GoogleMaps.wasMapInitialized()) {
var lat = 46.87916;
var lng = -3.32910;
var map_id = '#map';
initialize(map_id, lat, lng);
}
function initialize(map_id, lat, lng) {
var myOptions = {
zoom : 8,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($(map_id)[0], myOptions);
}
}
在map.html中
#map
<div ng-controller="MapCtrl"></div>
我收到错误:未知提供商:GoogleMapsProvider < - GoogleMaps
And*_*lin 18
由于视图在视图更改时创建和销毁控制器,因此您希望地图数据在其他位置保留.尝试创建一个存储数据的GoogleMap服务.
myApp.factory('GoogleMaps', function() {
var maps = {};
function addMap(mapId) {
maps[mapId] = {};
}
function getMap(mapId) {
if (!maps[mapId]) addMap(mapId);
return maps[mapId];
}
return {
addMap: addMap,
getMap: getMap
}
});
function MyController($scope, GoogleMaps) {
//Each time the view is switched to this, retrieve supermanMap
$scope.map = GoogleMaps.getMap('supermanMap');
$scope.editMap = function() {
$scope.map.kryptonite = true;
};
}
如果你不喜欢这个解决方案,还有其他一些方法可以做到这一点.
| 归档时间： |
|
| 查看次数： |
23354 次 |
| 最近记录： |