Embed Size (px)
DESCRIPTION
Стилизация маркеров Google Map используя CSS. Управление маркерами с использованием Symfony2 PHP Framework.
Citation preview
Symfony2 + Google Map и немного Rich Marker
Что будем использовать?
Composerhttp://getcomposer.org/
Symfony2http://symfony.com/
Liip/Imaginehttps://github.com/liip/LiipImagineBundle
RichMarker для Google Maps v3http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Google Map APIhttps://developers.google.com/maps/
Select2 JShttp://ivaynberg.github.io/select2/
и многое другое...
PHPStorm IDE
Конфигурация зависимостей вcomposer.json https://packagist.org
В окне терминала PHPStorm пишем следующее:
curl -s https://getcomposer.org/installer | php
php composer.phar install
cp app/config/parameters.yml.dist app/config/parameters.yml
nano app/config/parameters.yml
php app/check.php
php app/console doctrine:schema:create
php app/console assetic:dump
Установка Symfony
Структура файлов Symfony
В тэг <head> основного шаблона поместить:<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
В тэг <body> где нужна карта размещаем: <div id="map_canvas"></div>
Подключение Google Maps API
В случае если дневной трафик переваливает за 25000 показов, подключать карту нужно будет с API_KEY через Google APIs Console. Тогда Google Map API будет для вас платным.
Ограничения по использованию
var g = google.maps;
map.js
Создаем свой локальный map.js файл и в нём будем писать логику работы с картой. Его так же подключаем в <head>, только после подключения Google Map API.
map = new g.Map(document.getElementById("map_canvas"), mapOptions);
Инициализация карты в div и создание маркера
var mapOptions = { draggableCursor: 'auto', draggingCursor: 'move', disableDoubleClickZoom: true, panControl: false, zoomControl: true, zoomControlOptions: { style: g.ZoomControlStyle.LARGE, position: g.ControlPosition.LEFT_CENTER }, scaleControl: true, scaleControlOptions: { position: g.ControlPosition.LEFT_BOTTOM }, streetViewControl: false, overviewMapControl: false, center: new g.LatLng(48.850258199721495, 2.362060546875), zoom: 6, mapTypeControlOptions: { mapTypeIds: [g.MapTypeId.SATELLITE, 'map_style'], style: g.MapTypeControlStyle.HORIZONTAL_BAR, position: g.ControlPosition.BOTTOM_LEFT } };
mapOptions
Обработчики событий
Класс RichMarker расширяется от OverlayView и позволяет создавать маркер не просто картинкой, а HTML-кодом, но объявляется так же просто как и обычный маркер.
Вот мы и добрались до DOM.
RichMarker
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Функция drawOBJMarker вызывается функцией поиска и передает туда объект, который требуется отобразить на карте:
Создание маркера с HTML
Сейчас я совершил поиск по тэгу “monument”. Появилось три кружочка.
Вывод на карту RichMarker-ов
map.css
OBJFormType.php
Сущность объекта маркера
Поле изображения в сущности маркера объекта
Конфигурация бандла VichUploaderBundle
В процессе отрисовки маркеров существует несколько размеров одной и той же картинки для поиска и для увеличенной после нажатия на маркер объекта. LiipImagine создаёт миниатюры, следит чтобы картинка вписывалась в нужные размеры.
Изображения обрабатываетLiipImagineBundle
app/config.yml
Конфигурация liip_imagine
Если вы новичок в Symfony, можете получить представление на сайте видео-уроков:
https://knpuniversity.com
Это поможет вам лучше понимать структуру Symfony Framework
