在 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
<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>
因此，根据我对 Angular 的了解，我想我会创建一个 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.
有人可以建议正确的方法吗?
Can someone suggest the correct approach?
谢谢:)
根据安迪乔斯林的建议尝试:
在 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
推荐答案
由于视图会在视图更改时创建和销毁控制器，因此您希望地图数据保留在其他地方.尝试创建一个用于存储数据的 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屋！
