Я рассматриваю переход из backbonejs в angularjs.
В позвоночнике я могу инициализировать представление, в какой точке я создаю экземпляр карты google. Затем я могу панорамировать/увеличивать/etc и переключаться между представлениями, а не терять текущее состояние карты.
Учитывая следующее, используя angularjs:
layout.html
<body>
<div class="container-fluid" ng-view></div>
map.html
<div id="map_canvas" ng-controller="MapCtrl"></div>
Мне удалось создать директиву для рендеринга карты. Проблема в том, что он перезагружает карту каждый раз, когда я переключаюсь обратно на вид карты.
<map></map>
Итак, из того, что я узнал о Angular, я решил, что создам MapController и инициализирую карту там. Нет успеха.
Нижняя строка: мне нужно асинхронно инициализировать карту google и нажимать на нее данные локально или удаленно И иметь возможность перемещаться по приложению, не переставляя карту с нуля каждый раз.
Может кто-нибудь предложить правильный подход?
Спасибо:)
Попытка на предложение Энди Хослина:
В 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;
}
});
В контроллерах .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