Symfony2 + Google Map
и немного Rich Marker
Что будем использовать?
Composer

Symfony2

Liip/Imagine

http://getcomposer.org/

http://symfony.com/

https://github.com...
PHPStorm IDE
http://getcomposer.org

Творим!
Конфигурация зависимостей в
https://packagist.org
composer.json
Установка Symfony
В окне терминала PHPStorm пишем следующее:
curl -s https://getcomposer.org/installer | php
php composer....
Структура
файлов Symfony
Подключение Google Maps API
В тэг <head> основного шаблона поместить:
<script src="https://maps.googleapis.com/maps/api/js...
Ограничения по использованию
В случае если дневной трафик
переваливает за 25000 показов,
подключать карту нужно будет с AP...
map.js
Создаем свой локальный map.js файл и в
нём будем писать логику работы с картой.
Его так же подключаем в <head>, тол...
Инициализация карты в div и
создание маркера
map = new g.Map(document.getElementById("map_canvas"), mapOptions);
mapOptions
var mapOptions = {
draggableCursor: 'auto',
draggingCursor: 'move',
disableDoubleClickZoom: true,
panControl: f...
Обработчики событий
RichMarker
Класс RichMarker расширяется от
OverlayView и позволяет создавать
маркер не просто картинкой, а HTMLкодом, но о...
Создание маркера с HTML
Функция drawOBJMarker вызывается
функцией поиска и передает туда
объект, который требуется отобраз...
Вывод на карту RichMarker-ов
Сейчас я
совершил поиск
по тэгу
“monument”.
Появилось три
кружочка.
map.css
OBJFormType.php
Сущность объекта маркера
Поле изображения в сущности
маркера объекта

Конфигурация бандла VichUploaderBundle
Изображения обрабатывает
LiipImagineBundle
В процессе отрисовки маркеров
существует несколько размеров одной
и той же карт...
Конфигурация liip_imagine
app/config.yml
Если вы новичок в Symfony,
можете получить представление
на сайте видео-уроков:
https://knpuniversity.com
Это поможет вам ...
Google Map маркеры вместе с Symfony2
Google Map маркеры вместе с Symfony2
Google Map маркеры вместе с Symfony2
Google Map маркеры вместе с Symfony2
Google Map маркеры вместе с Symfony2
Google Map маркеры вместе с Symfony2
Upcoming SlideShare
Loading in …5
×

Google Map маркеры вместе с Symfony2

1,691 views

Published on

Стилизация маркеров Google Map используя CSS. Управление маркерами с использованием Symfony2 PHP Framework.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,691
On SlideShare
0
From Embeds
0
Number of Embeds
396
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Google Map маркеры вместе с Symfony2

  1. 1. Symfony2 + Google Map и немного Rich Marker
  2. 2. Что будем использовать? Composer Symfony2 Liip/Imagine http://getcomposer.org/ http://symfony.com/ https://github.com/liip/LiipImagineBundle Google Map API Select2 JS https://developers.google.com/maps/ http://ivaynberg.github.io/select2/ RichMarker для Google Maps v3 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html и многое другое...
  3. 3. PHPStorm IDE
  4. 4. http://getcomposer.org Творим!
  5. 5. Конфигурация зависимостей в https://packagist.org composer.json
  6. 6. Установка Symfony В окне терминала 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
  7. 7. Структура файлов Symfony
  8. 8. Подключение Google Maps API В тэг <head> основного шаблона поместить: <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> В тэг <body> где нужна карта размещаем: <div id="map_canvas"></div>
  9. 9. Ограничения по использованию В случае если дневной трафик переваливает за 25000 показов, подключать карту нужно будет с API_KEY через Google APIs Console. Тогда Google Map API будет для вас платным.
  10. 10. map.js Создаем свой локальный map.js файл и в нём будем писать логику работы с картой. Его так же подключаем в <head>, только после подключения Google Map API. var g = google.maps;
  11. 11. Инициализация карты в div и создание маркера map = new g.Map(document.getElementById("map_canvas"), mapOptions);
  12. 12. mapOptions 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 } };
  13. 13. Обработчики событий
  14. 14. RichMarker Класс RichMarker расширяется от OverlayView и позволяет создавать маркер не просто картинкой, а HTMLкодом, но объявляется так же просто как и обычный маркер. Вот мы и добрались до DOM. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
  15. 15. Создание маркера с HTML Функция drawOBJMarker вызывается функцией поиска и передает туда объект, который требуется отобразить на карте:
  16. 16. Вывод на карту RichMarker-ов Сейчас я совершил поиск по тэгу “monument”. Появилось три кружочка.
  17. 17. map.css
  18. 18. OBJFormType.php
  19. 19. Сущность объекта маркера
  20. 20. Поле изображения в сущности маркера объекта Конфигурация бандла VichUploaderBundle
  21. 21. Изображения обрабатывает LiipImagineBundle В процессе отрисовки маркеров существует несколько размеров одной и той же картинки для поиска и для увеличенной после нажатия на маркер объекта. LiipImagine создаёт миниатюры, следит чтобы картинка вписывалась в нужные размеры.
  22. 22. Конфигурация liip_imagine app/config.yml
  23. 23. Если вы новичок в Symfony, можете получить представление на сайте видео-уроков: https://knpuniversity.com Это поможет вам лучше понимать структуру Symfony Framework

×