Google maps 在AngularJS中初始化Google地图
我正在考虑从backbonejs迁移到angularjs 在主干中，我能够初始化视图，在该视图中我创建了一个GoogleMap实例。然后，我可以平移/缩放/等并在视图之间切换，而不会丢失地图的当前状态 使用angularjs提供以下信息： layout.htmlGoogle maps 在AngularJS中初始化Google地图,google-maps,angularjs,Google Maps,Angularjs,我正在考虑从backbonejs迁移到angularjs 在主干中，我能够初始化视图，在该视图中我创建了一个GoogleMap实例。然后，我可以平移/缩放/等并在视图之间切换，而不会丢失地图的当前状态 使用angularjs提供以下信息： layout.html <body> <div class="container-fluid" ng-view></div> 在services.js中： // Generated by CoffeeScript 1.
<body>
<div class="container-fluid" ng-view></div>
// 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);
angular.module('GoogleMaps', []).
factory('wasMapInitialized', function() {
console.log("inside service");
var maps = 0;
if (!maps) {
maps += 1;
return 0;
} else {
return 1;
}
});
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);
}
}
// 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);
angular.module('GoogleMaps', []).
factory('wasMapInitialized', function() {
console.log("inside service");
var maps = 0;
if (!maps) {
maps += 1;
return 0;
} else {
return 1;
}
});
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
<div ng-controller="MapCtrl"></div>
#地图
我得到错误：未知提供程序：GoogleMapsProvider由于视图在视图更改时创建并销毁控制器，因此您希望地图数据保留在其他地方。尝试创建一个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;
};
}
如果您不喜欢此解决方案，还有其他一些方法可以做到。这就是我在主干中所做的，以保留视图，而不是销毁视图。假设您有一个id=“container”的div，并且您的路由器有相应的路由
routes: {
"":"home",
"map": "showMap"
},
showMap: function() {
$("#container").children().detach();
if(!this.mapView) {
this.mapView = new MapView();
this.mapView.render();
}
$("#container").html(this.mapView.el);
}
以下是我在Angularjs routeProvider中使用maps api的解决方案： 在索引中，您必须添加： angular-google-maps.min.js 和lodash.min.js 在application.js中：
(function() {
var app = angular.module("myApp", ["ngRoute", "uiGmapgoogle-maps"]);
app.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'YOUR KEY HERE',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/workwith", {
templateUrl: "workwith.html",
controller: "WorkwithController"
})
.otherwise({
redirectTo: "/home"
});
});
(function() {
var app = angular.module("myApp");
var MyController = function($scope, $http, $log, $location, $routeParams, uiGmapGoogleMapApi) {
$log.info("MyController");
$log.info($routeParams);
// Define variables for our Map object
var areaLat = 44.2126995,
areaLng = -100.2471641,
areaZoom = 3;
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: {
latitude: areaLat,
longitude: areaLng
},
zoom: areaZoom
};
$scope.options = {
scrollwheel: false
};
});
};
app.controller("MyController", MyController);
})（） 拉里·艾特尔和大家好，我有以下方法： 首先，我们需要创建一些全局变量：
var mapGlobal, flag=0, CurrentmapNode;
控制器中 function MapCtrl($scope) {
var lat = 46.87916;
var lng = -3.32910;
var map_id = '#map';
if (flag==0)
initMap(mapId, lat, lng);
else
reinitMap(mapId);
function initMap(map_id, lat, lng) {
var myOptions = {
zoom : 8,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
mapGlobal = new google.maps.Map($(map_id)[0], myOptions);
if (typeof mapGlobal != 'undefined')
flag=1;
}
function reinitMap(mapId){
$(mapId)[0].append(CurrentmapNode);
}
$scope.$on("$destroy", function(){
CurrentmapNode = mapGlobal.getDiv(); //save current map in an auxiliar variable
});
}
致以最良好的祝愿。我也想知道答案。我创建了一个不断改进的项目。很好，已经在我的观察名单上了。：）@LarryEitel你应该接受Andy的回答我无法在AngularJS 1.0.8和Google Maps API v3中实现这一点。你能简要介绍一下其他选项（只是命名它们）吗？谢谢。您可以在$rootScope中创建映射，它永远不会被销毁，并让子作用域继承它。您也可以不使用ng视图，这样不会创建和销毁作用域和dom元素，而是显示和隐藏它们，但您必须运行自己的路由系统。你也可以创建一个maps对象，它只是angular控制器引用的angular之外的一个普通的JavaScript对象（但这真的只是一种糟糕的服务方式），Andy，你能提出一些想法真是太好了。我一点也不生气。你有没有可能删掉一个例子？我陷在泥里，车轮打滑。谢谢：）您的服务初始化错误。下面是一个例子：安迪，非常感谢你。你的建议很有效。我将尽快发布实际使用的代码。谢谢Jerry，但是，您的解决方案是主干而不是angularjs。