Google Мапи. Оверлеї (накладення)
Google Мапи - Оверлеї
Оверлеї (Накладення) – це об’єкти на мапі, прив’язані до координат широти/довготи.
Google Мапи мають декілька типів накладень:
- Маркер – окремі місця на мапі. Маркери також можуть відображати власні зображення значків
- Полілінія (ломана лінія) - ряд прямих ліній на мапі
- Багатокутник - серія прямих ліній на мапі, і форма є "замкнутою"
- Коло та прямокутник
- Інформаційне вікно – відображає вміст у спливаючій підказці вгорі мапи
- Користувацькі накладання
Google Мапи - Додати маркер
Конструктор Marker створює маркер. Зауважте, що для відображення маркера має бути встановлено властивість position.
Додайте маркер до мапи за допомогою методу setMap():
Приклад
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Мапи - Анімувати маркер
Наведений нижче приклад показує, як анімувати маркер за допомогою властивості animation:
Приклад
var marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Мапи - Іконка замість маркера
Наведений нижче приклад визначає зображення (іконку/піктограму), яке слід використовувати замість стандартного маркера:
Приклад
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Мапи - Полілінія (Ломана лінія)
Полілінія – це лінія, яка проходить через низку координат у впорядкованій послідовності.
Полілінія підтримує такі властивості:
- path - визначає кілька координат широти/довготи лінії
- strokeColor - визначає шістнадцятковий колір рядка (формат: "#FFFFFF")
- strokeOpacity - визначає непрозорість лінії (значення між 0.0 та 1.0)
- strokeWeight - визначає товщину обведення лінії в пікселях
- editable - визначає, чи можна редагувати рядок користувачам (true/false)
Приклад
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Мапи - Багатокутник
Багатокутник схожий на полілінію (ломану), оскільки він складається з серії координат у впорядкованій послідовності. Однак багатокутники призначені для визначення областей у закритому циклі.
Багатокутники виготовлені з прямих ліній, а форма - "закрита" (Усі лінії з’єднуються).
Багатокутник підтримує наступні властивості:
- path - визначає кілька координат Latlng для лінії (перша та остання координата рівні)
- strokeColor - визначає шістнадцятковий колір для лінії (формат: "#FFFFFF")
- strokeOpacity - визначає непрозорість лінії (значення між 0.0 та 1.0)
- strokeWeight - визначає товщину обведення лінії в пікселях
- fillColor - визначає шістнадцятковий колір для області всередині обмеженої області (формат: "#FFFFFF")
- fillOpacity - визначає непрозорість кольору заливки (значення між 0.0 та 1.0)
- editable - визначає, чи можна редагувати рядок користувачам (true/false)
Приклад
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Мапи - Коло
Коло підтримує такі властивості:
- center - визначає google.maps.LatLng центру кола
- radius - визначає радіус кола в метрах
- strokeColor - визначає шістнадцятковий колір лінії навколо кола (формат: "#FFFFFF")
- strokeOpacity - визначає непрозорість кольору обведення (значення між 0.0 та 1.0)
- strokeWeight - визначає товщину обведення лінії в пікселях
- fillColor - визначає шістнадцятковий колір для області всередині кола (формат: "#FFFFFF")
- fillOpacity - визначає непрозорість кольору заливки (значення між 0.0 та 1.0)
- editable - визначає, чи можуть користувачі редагувати коло (true/false)
Приклад
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Мапи - InfoWindow
Показати інформаційне вікно з текстовим вмістом для маркера:
Приклад
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
