google-maps - angular google maps
Inicializar Google Map en AngularJS (4)
Aquí está mi solución para usar la aplicación de mapas con Angularjs routeProvider: en su índice debe agregar:
angular-google-maps.min.js y lodash.min.js
en 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"
});
});
}) ();
Por último, pero no menos importante en su controlador:
(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);
}) ();
Estoy considerando migrar de backbonejs a angularjs.
En la red troncal, puedo inicializar una vista, en cuyo punto creo una instancia de google map. Puedo hacer un pan / zoom / etc. y cambiar de vista y no perder el estado actual del mapa.
Dado el siguiente uso de angularjs:
layout.html
<body>
<div class="container-fluid" ng-view></div>
map.html
<div id="map_canvas" ng-controller="MapCtrl"></div>
Pude crear una directiva para renderizar un mapa muy bien. El problema es que vuelve a cargar el mapa cada vez que vuelvo a la vista del mapa.
<map></map>
Entonces, por lo que estoy aprendiendo sobre Angular, pensé que crearía un MapController e inicializaría el mapa allí. Sin éxito.
En resumen, necesito sincronizar e iniciar un mapa de Google y enviar datos a él localmente o de forma remota Y poder navegar por la aplicación sin volver a cargar el mapa desde cero cada vez.
¿Alguien puede sugerir el enfoque correcto?
Gracias :)
Sugerencia de Attempt Per Andy Joslin:
En 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);
En services.js:
angular.module(''GoogleMaps'', []).
factory(''wasMapInitialized'', function() {
console.log("inside service");
var maps = 0;
if (!maps) {
maps += 1;
return 0;
} else {
return 1;
}
});
En 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);
}
}
En map.html
#map
<div ng-controller="MapCtrl"></div>
Recibo un error: Proveedor desconocido: GoogleMapsProvider <- GoogleMaps
Como las vistas crean y destruyen controladores cuando la vista cambia, quiere que los datos de sus mapas permanezcan en otro lugar. Intenta crear un servicio de GoogleMap que almacenará los datos.
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;
};
}
Si no te gusta esta solución, hay otras formas de hacerlo también.
Esto es lo que estoy haciendo en Backbone para mantener la vista en lugar de destruirla. Supongamos que tiene un div con id = "contenedor" y su enrutador tiene las rutas correspondientes.
routes: {
"":"home",
"map": "showMap"
},
showMap: function() {
$("#container").children().detach();
if(!this.mapView) {
this.mapView = new MapView();
this.mapView.render();
}
$("#container").html(this.mapView.el);
}
Hola Larry Eitel y todos, tengo el siguiente enfoque:
Primero, necesitamos crear algunas variables globales:
var mapGlobal, flag=0, CurrentmapNode;
Luego en Controller :
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
});
}
La función "al destruir" guarda el estado del mapa actual en otra variable global, luego, cuando se recrea la vista, no es necesario crear otra instancia del mapa.
La creación de otra instancia de mapa puede provocar la pérdida de memoria y aumentar el uso de la API de Google Maps cada vez que se vuelva a crear la vista.
Atentamente