Оверлеи 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 центра круга
- радиус - указывает радиус круга в метрах
- strokeColor — указывает шестнадцатеричный цвет линии вокруг круга (формат: "#FFFFFF")
- strokeOpacity — определяет непрозрачность цвета обводки (значение от 0,0 до 1,0).
- strokeWeight - определяет вес обводки линии в пикселях.
- fillColor — указывает шестнадцатеричный цвет области внутри круга (формат: "#FFFFFF").
- fillOpacity — указывает непрозрачность цвета заливки (значение от 0,0 до 1,0).
- редактируемый - определяет, доступен ли круг для редактирования пользователями (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);