Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 26
Приветствую всех, уважаемые харбожители!
Харбахарб.ру :)
В свое время релизоаывал прослойку для гуглокарт. У меня была такая структура:
Мне лично кажется, что такой подход — с описанием объектов карты в разметке более соответствует принципам фреймворка.
- общая директива
ng-mapсоздавала общий scope и принимала общие конфиги для всех объектов карты, все нижеперечисленные директивы должны быть вложены внутрь данной.
ng-map-canvasдля полотна картыng-map-markerдля позиционирования маркера. Для нескольких маркеров можно использовать ng-repeat :)ng-map-routeиng-map-route-waypoint(в сочетании с ng-repeat) для отрисовки маршрутовng-markers-cloud— оптимизированный вариант для показа большого количества маркеров, в ng-model можно передать массив для вывода. Из минусов — наблюдение за массивом ведется только по ссылке, изменение отдельных элементов не приведет к перерисовке.ng-map-overlay— универсальная директива, годится как для отображения кастомных маркеров, так и для модальных окон на карте, всплывающих облачков, тултипов. Создавала оверлэй для карты, куда помещалось переданное внутри директивы html-содержимое со всеми преимуществами дата-байндинга.
Мне лично кажется, что такой подход — с описанием объектов карты в разметке более соответствует принципам фреймворка.
А по мне, так это дело вкуса. В чем разница между
и
???
На функционал это не как не влияет, внутри происходит одно и тоже.
<div ya-map="..." ng-model="..." ... ></div> и
<div ng-map><ng-map-canvas><ng-map-marker ng-repeat="..."></div>
???
На функционал это не как не влияет, внутри происходит одно и тоже.
Внутри — может быть и одно и то же, но при написании библиотеки важно все же как это снаружи, для пользователя библиотеки.
В вашем случае описание элементов карты находится где-то в контроллере, в моем — во view, что правильнее, т.к. карта и ее элементы — это отображение. В моем подходе можно, например, применить фильтры для сериализации некой модели гео-объектов в удобный для директивы вид:
Это, конечно, может быть медленнее в целом, но подход более чистый для разделения безнес-логики и вью-логики.
В вашем случае описание элементов карты находится где-то в контроллере, в моем — во view, что правильнее, т.к. карта и ее элементы — это отображение. В моем подходе можно, например, применить фильтры для сериализации некой модели гео-объектов в удобный для директивы вид:
<ng-map-marker ng-repeat="geoObject in geoObjects" source="geoObject|serializeGeoObject">Это, конечно, может быть медленнее в целом, но подход более чистый для разделения безнес-логики и вью-логики.
А что мешает применить фильтры, или любые функции для получения выходного набора прямо в контроллере?
На счет отображения, параметры отображения карты в моем случае находятся не в контроллере, а в настройках провайдера. В контроллере просто существует возможность переопределить некоторые из них в случае необходимости (хотя сомнительно что это кому понадобится). Но это конечно можно делать и в представлении, но в этом случае оно здорово распухнет, и потеряет в производительности.
Но чисто в концептуальном плане согласен с вами. Хотя любую концепцию тоже не стоит потреблять вслепую. Чтобы выяснить что лучше, по уму, нужно написать код по обоим вариантам и пропустить его через тесты на производительность. Возможно я попробую это сделать на досуге.
На счет отображения, параметры отображения карты в моем случае находятся не в контроллере, а в настройках провайдера. В контроллере просто существует возможность переопределить некоторые из них в случае необходимости (хотя сомнительно что это кому понадобится). Но это конечно можно делать и в представлении, но в этом случае оно здорово распухнет, и потеряет в производительности.
Но чисто в концептуальном плане согласен с вами. Хотя любую концепцию тоже не стоит потреблять вслепую. Чтобы выяснить что лучше, по уму, нужно написать код по обоим вариантам и пропустить его через тесты на производительность. Возможно я попробую это сделать на досуге.
А что будет если в ng-model содержится массив и 100 маркеров, а потом вы удалили один? Модель изменится и вам придется либо обновлять все маркеры, либо портить пользовательские данные и ставить в них флаг, чтобы отличать новые маркеры от уже созданных.
Либо применять подход комментатора выше, где ng-repeat позаботится об этом самостоятельно
Либо применять подход комментатора выше, где ng-repeat позаботится об этом самостоятельно
Все несколько проще. В этом случае мы просто определяем разность массивов, и удаляем с карты удаленные маркеры, обновляем обновленные и т.д. А
ng-repeat при каждом изменении массива будет вызывать полную перерисовку карты.Нет, ngRepeat создает и убирает только изменившиеся элементы. В коде есть специальное условие. Так что в этом случае нужно заботиться только об удалении и создании элементов и не делать вот этого
Спасибо. Не знал этого. В будущем поправлю с учетом этого.
Имеем структуру:
И как потом эту структуру синхронизировать с картой? Все равно чтобы удалить, отредактировать и т.д. что-либо на карте нужно вызывать javascript, все тот же метод synchronize.
Или же вы предлагаете напрямую работать с html карты?
<div map ... >
<point ng-repeat="...">
</div>
И как потом эту структуру синхронизировать с картой? Все равно чтобы удалить, отредактировать и т.д. что-либо на карте нужно вызывать javascript, все тот же метод synchronize.
Или же вы предлагаете напрямую работать с html карты?
У меня так:
Когда ngRepeat удалит элемент (и его скоуп), вызовется соответствующий колбэк. У вас же самописный монстр synchronize, который дублирует фактически реализацию ngRepeat.
Кстати, не понимаю, почему не вынесут код из ngRepeat в сервис — функция непростая, а следить глубоко за массивами приходится иногда, писать свое решение как-то глупо.
$scope.on('$destroy", function () {
map.removeMarker(marker);
});
Когда ngRepeat удалит элемент (и его скоуп), вызовется соответствующий колбэк. У вас же самописный монстр synchronize, который дублирует фактически реализацию ngRepeat.
Кстати, не понимаю, почему не вынесут код из ngRepeat в сервис — функция непростая, а следить глубоко за массивами приходится иногда, писать свое решение как-то глупо.
Полностью с вами согласен. От всего этого уже потихоньку избавляюсь. Очень ваши советы с justboris-ом помогли. Действительно я там много сделал того, что можно реализовать встроенными средствами angular. Думаю сегодня в репозитарии появиться новая реализация. Она пока будет поддерживать только показ данных (без редактирования).
Лучше не сюда…
Такая вложенность еще дает прекрасную возможность для взаимодействия point-ов с map-ом. И вообще любого взаимодействия вложенных элементов с родителем. В данном случае можно опубликовать любой интерфейс (положить любые методы на this контроллера map-а), а потом в point просто потребовать этот контроллер (
require: '^map') и взаимодействовать напрямую.
Я всегда недооценивал Angular-разработчиков и очень хочу, чтобы кто-нибудь это исправил.
Вот, например, кусок из вашего демо-кода.
Расскажете, пожалуйста, что тут происходит.
Вот, например, кусок из вашего демо-кода.
Расскажете, пожалуйста, что тут происходит.
$scope.changeCenter = function(){
var currentCenter = $scope.mapProperties.params.center;
if(!currentCenter){
$scope.mapProperties.params.center = {x:37.64, y:55.76};
}else if(currentCenter.x && currentCenter.y){
$scope.mapProperties.params.center='Казахстан, город Алматы';
}else if(currentCenter.length===2){
$scope.mapProperties.params.center = null;
}else if(currentCenter==='Казахстан, город Алматы'){
$scope.mapProperties.params.center = [37.64,55.76];
}
};
Как с API v.2.1.x работет? Не пробовали?
А что, исходники закрытые?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Яндекс карты для angular.js