У цій частині ми навчимося додавати маркери на карту для позначення точок.
Візьмемо код з попередньої замітки «Додаємо елементи управління на карту Google Maps».
Повторюю його тут.
var map = new GMap2 (document.getElementById ( "map_canvas")); map.setCenter (new GLatLng (56.32811,44.0), 10);
map.addControl (new GLargeMapControl ()); map.addControl (new GMapTypeControl ());
На початку, ми замінимо елемент управління GLargeMapControl на GSmallMapControl, щоб збільшити видиму область карти, а також ми закріпимо минулий матеріал.
Для цього необхідно замінити рядок map.addControl (new GLargeMapControl ()); на map.addControl (new GSmallMapControl ());
Тепер додамо позначення маркера на нашу карту.
На початку нам потрібно дізнатися координати точки, в яку ми збираємося розміщувати маркер.
Після цього потрібно додати рядок коду var point = new GLatLng (56.293557,43.99898) ;. де замість чисел 56.293557 і 43.99898 потрібно підставити ваші значення.
Для додавання маркера на карту служить рядок map.addOverlay (new GMarker (point));
За замовчуванням для позначення маркера використовується значок G_DEFAULT_ICON, але можна поставити і призначений для користувача значок.
В якості аргументів конструктора GMarker використовуються GLatLng і необов'язковий об'єкт GMarkerOptions.
Маркери є інтерактивними елементами. За умовчанням вони отримують, наприклад, події click і служать для виведення інформаційних вікон в приймачах подій.
І так в наш код після завдання елементів управління ми додали два рядки
point = new GLatLng (56.293557,43.99898); map.addOverlay (new GMarker (point));
var map = new GMap2 (document.getElementById ( «map_canvas»)); map.setCenter (new GLatLng (56.32811,44.0), 10);
map.addControl (new GSmallMapControl ()); map.addControl (new GMapTypeControl ());
point = new GLatLng (56.293557,43.99898); map.addOverlay (new GMarker (point));
Тепер давайте спробуємо додати власний значок в якості маркера на карту.
Для створення значка нам буде потрібно два зображення - самого значка і його тінь (значок для тіні в нашому прикладі ми не використовуємо).
Тіньове зображення необхідно створювати під кутом 45 градусів (вгору і вправо) від основного зображення, а лівий нижній кут тіньового зображення повинен розташовуватися на одній прямій з лівим нижнім кутом основного. Тіньові зображення повинні бути 24-розрядними PNG-зображеннями з альфа-прозорістю, щоб передача кордонів зображення на карті була коректною.
Спочатку ми повинні визначити сам новий значок.
Це робиться наступним кодом.
var myexIcon = new GIcon (); myexIcon.image = "files / cek_logo.png«; - задаємо файл із зображенням значка
myexIcon.iconSize = new GSize (38, 29); - розмір значка
myexIcon.iconAnchor = new GPoint (19, 14); - зміщення значка від точки
myexIcon.infoWindowAnchor = new GPoint (5, 5); - зміщення інформаційного вікна
Після цього ми визначаємо об'єкт GMarkerOptions
І в рядок map.addOverlay (new GMarker (point)); після point через кому дописуємо. markerOptions.
В результаті у нас виходить наступний код:
map.setCenter (new GLatLng (56.32811,44.0), 10);
map.addControl (new GSmallMapControl ()); map.addControl (new GMapTypeControl ());
var myexIcon = new GIcon (); myexIcon.image = «files / cek_logo.png»;
myexIcon.iconSize = new GSize (38, 29);
myexIcon.iconAnchor = new GPoint (19, 14);
myexIcon.infoWindowAnchor = new GPoint (5, 5);
point = new GLatLng (56.293557,43.99898); map.addOverlay (new GMarker (point, markerOptions));
Завантажуємо сторінку в браузері і спостерігаємо
Навігація по публікаціям
Спасибо большое за приклад, все дуже зрозуміло написано, добре, що зустрічаються в мережі такі добрі люди як ви!
Велике спасибі.
А як додати посилання на маркер?
Посилання в Балун? Або посилання на мітку з іншої сторінки або з меню на мапі?
Так. Ви найкращий «учитель». Ось тільки не знайшов уроку, як в основі цього коду додати найпростіше опис маркера при натисканні на нього. Будьте ласкаві підкажіть урок ...
Олексій, додати подію на натискання маркера досить легко. Якщо просто треба вивести текст, то я користуюся наступною конструкцією
/////
str = "Тема Просто потрібний текст, і ще трохи, і ще трохи щоб віконце розтягнулося як треба ...«;
GEvent.addListener (marker, «click», function () map.openInfoWindowHtml (coords, str); // робимо відкриття вікна при кліці на маркер
>);
/////
вул. Пушкіна, будинок ...
(Сюди вставляю код нового маркера)
і так 10 будинків ...
Але маркера не повинні додаватися, так як виходить все нові маркери повинні бути присутніми в самій функції initialize () ...
2-а рази вивести список не виходить, тобто спочатку «вул. Пушкіна, будинок ... », а потім сформувати функцію, теж не виходить ....
niichi, будьте ласкаві, поясніть, будь ласка, як з криком і своєї картинкою маркера. Бо у мене пізно лягати спати картинка маркера або інфоокно при кліці. Поєднати їх ну не як не виходить.
Дайте, будь ласка, приклад, а краще допишіть це. Бо я за прикладом цього роблю.
Заздалегідь дякую.
Велике спасибі за уроки! Дуже допомогли на початковому етапі!