Карты Google - наложение
Оверлей - это объект, связанный с координатой долготы/широты на карте, и будет двигаться при перетаскивании или увеличении масштабирования карты.
API Google Maps имеет следующие наложения:
1. Точки на карте отображаются с использованием маркеров, и обычно отображаются пользовательские значки. Тег является объектом типа Gmarker, а значок можно настроить с использованием объекта типа Gicon.
2. Линии на карте отображаются с использованием полилиний (представляющих коллекцию точек). Линия является объектом типа Gpolyline.
3. Площадь на карте отображается как многоугольник (если это произвольная форма) или наложение нижней поверхности (если это прямоугольная область). Полигон похож на закрытую полилину, поэтому это может быть любой формой. Наземные наложения обычно используются на карте, которые имеют прямые или косвенные ассоциации с плитками.
4. Сама карта отображается с использованием наложений плитки. Если у вас есть собственная серия плиток, вы можете использовать класс GtileLayerOverlay, чтобы изменить плитки, которые у вас уже есть на карте, или даже использовать Gmaptype для создания собственного типа карты.
5. Информационное окно также является специальным наложением. Однако обратите внимание, что информационное окно автоматически добавляется на карту, а карта может добавить только один объект типа Ginfowindow.
Карты Google - добавить теги
Отметьте точки на карте. По умолчанию они используют g_default_icon (вы также можете указать пользовательские значки). Конструктор Gmarker принимает объекты Glatlng и Gmarkeroptions (необязательно) в качестве параметров.
Маркеры предназначены для интерактивных. Например, по умолчанию они получают события «клик», которые часто используются для открытия информационных окон в слушателях событий.
Добавьте тег на карту с помощью метода setMap ():
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({position: mycenter,}); marker.setmap (map);} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "GoogleMap"> </div> </body> </html> <div = "Пример рендеринг:
Google Maps - Tragable Tags
В следующем примере описывается, как использовать свойство анимации для перетаскивания тега:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); var marker; function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getelementbyid ("googlemap"), mapprop); marker = new google.maps.marker ({позиция: mycenter, анимация: google.maps.animation.bounce}); marker.setmap (map);} google.maps.event.adddoder (window whip ', initiaze); id = "googlemap"> </div> </body> </html>Карты Google - значок
Теги могут отображаться с помощью пользовательского нового значка вместо значка по умолчанию:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({позиция: mycenter, icon: 'pinkball.png'}); marker.setmap (map);} google.maps.event.adddomlistener (window, 'Load', инициализация); </script> </head> <body> <div Id = "googlemap"> </div> </body> </html> </html> </html> </html> </html> </html> </html>Карты Google - Складные линии
Объекты Gpolyline создают линейные наложения на картах. Gpolyline включает в себя серию очков и создает серию линейных сегментов, которые упорядоченно соединяют эти точки.
Полилины поддерживают следующие свойства:
Путь - указывает координаты широты/долготы нескольких прямых линий
StrokeColor - указывает гексадецимальное значение цвета линии (формат: "#ffffff")
ScloseOpacity - указывает прозрачность линии (значение составляет от 0,0 до 1,0)
Весвой вес - определяет ширину линии в пикселях.
Редактируемый - определяет, может ли пользователь редактировать прямую линию (true/false)
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (52,395715,4.888916); var stavanger = new Google.maps.latlng (58,983991,5,734863); var amsterdam = new Google.maps.latlng (52,395715,88891116); google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: x, Zoom: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementbyId ("googlemap"), mapprop); var mytrip = [stavanger, amsterdam, london]; var flightpath = new Google.maps.polyline ({Pather: Mytrip, Strokecolor: "#0000ff", IncloyPance: 0.8, Sclokevere: 2. });; flightpath.setMap (map);} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Пример рендеринг:
Карты Google - многоугольники
Объекты Gpolygon похожи на объекты Gpolyline в том смысле, что все они включают серию упорядоченных точек. Однако вместо двух конечных точек, таких как полилинии, полигоны предназначены для определения областей, которые образуют закрытые петли.
Как и полилинии, вы можете настроить цвет, толщину и прозрачность краев многоугольников (линии), а также цвет и прозрачность закрытых областей заполнения. Цвет должен быть в шестнадцатеричном номере HTML -стиль.
Полигоны поддерживают следующие свойства:
Путь - Указывает координаты множественных широт прямой линии (первые и последние координаты равны)
StrokeColor - указывает гексадецимальное значение цвета линии (формат: "#ffffff")
ScloseOpacity - указывает прозрачность линии (это значение составляет от 0,0 до 1,0)
Весвой вес - определяет ширину линии в пикселях.
FillColor - указывает гексадецимальное значение цвета для закрытой области (формат: "#ffffff")
FILOPOPACEY - Указывает прозрачность цвета заполнения (значение составляет от 0,0 до 1,0)
Редактируемый - определяет, может ли пользователь редактировать прямую линию (true/false)
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (52,395715,4.888916); var stavanger = new Google.maps.latlng (58,983991,5,734863); var amsterdam = new Google.maps.latlng (52,395715,88891116); google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: x, Zoom: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementbyid ("googlemap"), mapprop); var mytrip = [stavanger, amsterdam, london, stavanger]; var flightpath = new Google.maps.polygon ({Path: Mytrip, StrokeColor: "#0000ff", SlckeOpacy: 0. FillColor: "#0000ff", FilelPacity: 0.4}); FlightPath.setMap (map);} Google.maps.event.adddomListener (окно, 'загрузка', инициализировать); </script> </head> <body> <div Id = "GoogleMap"> </div> </body> </html>Пример рендеринг:
Карты Google - круг
Круги поддерживают следующие свойства:
Центр - укажите параметр центральной точки круга Google.maps.latlng
радиус - указывает радиус круга в метрах
StrokeColor - указывает шестнадцатеричное значение цвета дуги (формат: "#ffffff")
ScloseOpacity - указывает прозрачность дуги (значение составляет от 0,0 до 1,0)
Весвой вес - определяет ширину линии в пикселях.
FillColor - указывает значение заполнения шестнадцатеричного цвета круга (формат: "#ffffff")
FILOPOPACEY - Указывает прозрачность цвета заполнения (значение составляет от 0,0 до 1,0)
Определяет, может ли пользователь отредактировать прямую линию (true/false)
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? Google.maps.latlng (52.395715,4.888916); function initiazize () {var mapprop = {center: amsterdam, Zoom: 7, maptypeid: google.maps.maptypeid.roidmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp); var mycity = new Google.maps.circle ({Центр: Амстердам, радиус: 20000, StrokeColor: "#0000ff", инсульт: 0.8, 3 -й вес: 2, FillColor: "#0000ffffffffffffffer". }); mycity.setmap (map);} google.maps.event.adddomlistener (window, 'load', initiaze); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Пример рендеринг:
Карты Google - информационное окно
Отобразить окно текстового сообщения на теге:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850); function initiazize () {var mapprop = {center: myCenter, Zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map.maps.getelemead.ReadMap}; var Map = new Google.maps.Map (document.getElemead ("googlemap"; google.maps.marker ({position: mycenter,}); marker.setmap (map); var Infowindow = new Google.maps.infowindow ({content: "Hello World!"}); Infowindow.open (map, marker);} google.maps.event.addderlister (window 'Load', инициализируйте) </script> </script> </script> </script> </script> </script> </script> </script>; id = "googlemap"> </div> </body> </html>Пример рендеринг:
Выше представляет собой сборник информации о наложении карт Google. Мы продолжим добавлять его позже. Спасибо за поддержку этого сайта!