Ich überlege, von Backbonejs in AngularJs zu migrieren.Google Map in AngularJS initialisieren
Im Backbone kann ich eine Ansicht initialisieren, an welcher Stelle ich eine Instanz von Google Map erstelle. Ich kann dann schwenken/zoomen/etc und zwischen Ansichten wechseln und nicht den aktuellen Zustand der Karte verlieren.
Angesichts der folgenden mit AngularJS:
layout.html
<body>
<div class="container-fluid" ng-view></div>
map.html
<div id="map_canvas" ng-controller="MapCtrl"></div>
Ich war in der Lage, eine Richtlinie erstellen eine Karte nur gut zu machen. Problem ist, dass es die Karte jedes Mal neu lädt, wenn ich zurück zur Kartenansicht wechsle.
<map></map>
Also von dem, was ich über Angular lerne, dachte ich, ich MapController schaffen würde und die Karte dort initialisieren. Kein Erfolg.
Fazit ist, dass ich eine Google-Karte async-init initiieren und Daten lokal oder remote dorthin schieben UND in der Lage sein, die App ohne RELOADING die Karte von Grund auf jedes Mal zu navigieren.
Kann jemand den richtigen Ansatz vorschlagen?
Danke :)
Versuch Pro Andy Joslin Vorschlag:
In 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);
In services.js:
angular.module('GoogleMaps', []).
factory('wasMapInitialized', function() {
console.log("inside service");
var maps = 0;
if (!maps) {
maps += 1;
return 0;
} else {
return 1;
}
});
In 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);
}
}
In map.html
#map
<div ng-controller="MapCtrl"></div>
ich Fehler: Unbekannter Anbieter: GoogleMapsProvider < - Google
+1. Möchte auch die Antwort wissen. –
Ich habe ein Projekt [eckig-google-maps] (https://github.com/LarryEitel/angular-google-maps) mit laufenden Verbesserungen erstellt. Siehe [Live-Version] (http://angular-google-maps.nodester.com/) –
Großartig, bereits auf meiner Beobachtungsliste. :) –