初始化谷歌地图在AngularJS [英] Initialize Google Map in AngularJS
问题描述
我正在考虑从backbonejs迁移到angularjs。
I am considering migrating from backbonejs to angularjs.
在骨干网，我能够初始化在这一点，我创建谷歌地图的实例的视图。那么我可以平移/缩放/等，并视图之间切换，而不是失去地图的当前状态。
In backbone I am able to initialize a view at which point I create an instance of google map. I can then pan/zoom/etc and switch between views and not lose the current state of the map.
由于使用angularjs以下内容：
Given the following using angularjs:
的layout.html
layout.html
<body>
<div class="container-fluid" ng-view></div>
map.html
map.html
<div id="map_canvas" ng-controller="MapCtrl"></div>
我能够创建指令来呈现地图就好了。问题是，它重新加载每次我切换回地图查看地图。
I was able to create a directive to render a map just fine. Problem is that it reloads the map each time I switch back to the map view.
<map></map>
因此，从我所了解的角，我想我会创建一个MapController和初始化地图那里。没有成功。
So from what I am learning about Angular, I figured I would create a MapController and initialize the map there. No success.
底线是，我需要异步初始化一个谷歌地图和本地或远程数据推给它，并能够浏览应用，而无需每次都从头开始重新加载地图。
Bottom line is I need to async-init a google map and push data to it locally or remotely AND be able to navigate the app without RELOADING the map from scratch each time.
有人建议正确的做法？
感谢您：）
尝试每安迪乔斯林建议：
在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＆LT; - 的GoogleMaps
推荐答案
由于意见创建和视图时改变，你希望你的地图数据，以坚持别处破坏控制器。尝试创建一个将存储数据的GoogleMap的服务。
Since views create and destroy controllers when the view changes, you want your maps data to persist somewhere else. Try creating a GoogleMap service which will store the data.
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;
};
}
如果你不喜欢这个解决方案，还有一些其他的方法可以做到这一点。
If you don't like this solution, there are some other ways to do it too.
这篇关于初始化谷歌地图在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
