gpt4 book ai didi

google-maps - 在 AngularJS 中初始化谷歌地图

转载 作者:行者123 更新时间:2023-12-03 10:16:36 27 4
gpt4 key购买 nike

我正在考虑从backbonejs 迁移到angularjs。

在主干中,我能够初始化一个 View ,此时我创建了一个谷歌地图的实例。然后我可以平移/缩放/等并在 View 之间切换,而不会丢失 map 的当前状态。

使用 angularjs 给出以下内容:

布局.html

<body>
<div class="container-fluid" ng-view></div>

map .html
<div id="map_canvas" ng-controller="MapCtrl"></div>

我能够创建一个指令来渲染 map 就好了。问题是每次我切换回 map View 时它都会重新加载 map 。
<map></map>

因此,根据我对 Angular 的了解,我想我会创建一个 MapController 并在那里初始化 map 。没有成功。

底线是我需要异步初始化一个谷歌地图并将数据推送到本地或远程,并且能够导航应用程序而无需每次都从头开始重新加载 map 。

有人可以提出正确的方法吗?

谢谢 :)

根据 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

最佳答案

由于 View 会在 View 更改时创建和销毁 Controller ,因此您希望 map 数据保留在其他地方。尝试创建一个将存储数据的 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;
};
}

如果你不喜欢这个解决方案,还有其他一些方法可以做到这一点。

关于google-maps - 在 AngularJS 中初始化谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11180750/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com