Google Maps Overlays
Добавление маркера на карту Google:
Карты Google-оверлеи
Оверлеи — это объекты на карте, привязанные к координатам широты и долготы.
Карты Google имеют несколько типов оверлеев:
- Marker-одиночные локации на карте. Маркеры могут также отображать пользовательские изображения значков
- Полилиния-серия прямых линий на карте
- Полигон-серия прямых линий на карте, и форма "закрыта"
- Окружность и прямоугольник
- Info Windows-отображает содержимое всплывающего окна в верхней части карты
- Пользовательские оверлеи
Карты Google-Добавление маркера
Конструктор маркеров создает маркер. (Обратите внимание, что для отображения маркера должно быть задано свойство Position).
Добавьте маркер на карту с помощью метода сетмап ():
Пример
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 Maps-Иконка вместо маркера
В приведенном ниже примере указывается изображение (значок), используемое вместо маркера по умолчанию:
Пример
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Карты Google-полилиния
Полилинией называется линия, которая рисуется через последовательность координат в упорядоченной последовательности.
Полилиния поддерживает следующие свойства:
- path - Указывает несколько координат широты/долготы для линии
- strokeColor - задает hex цвет для строки (формат: "#FFFFFF")
- strokeOpacity - задает непрозрачность линии (значение между 0.0 and 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 and 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-всплывающее окно
Показать всплывающее окно с некоторым текстовым содержимым для маркера:
Пример
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
