Набор управления картой Google
Карты Google - Настройки управления по умолчанию:
При использовании стандартных карт Google настройки по умолчанию следующие:
1.zoom - Показать слайдер, чтобы управлять уровнем масштабирования карты
2.PPAN-Карта показывает управление с плоским дном, нажмите на 4 угла, чтобы охватить карту
3. Maptype - позволяет пользователям переключаться между типами карт (Roadmap и Satallite)
4. StreetView - показан как иконка злодея уличного вида, вы можете перетащить до точки на карте, чтобы открыть вид улицы
Карты Google - больше наборов управления
В дополнение к вышеуказанному набору управления по умолчанию, Google также имеет:
.Scale - Show Map Scale
.Rotate - показывает небольшую икону окружности, которая может повернуть карту
.verview Map - Просмотреть карту с точки зрения обширной области
При создании карты вы можете указать, какие наборы управления отображаются через параметры настройки или изменить параметры настройки карты, вызывая Setoptions ().
Карты Google - выключите набор управления по умолчанию
Вы можете иметь возможность отключить набор управления по умолчанию.
Чтобы отключить набор управления по умолчанию, установите свойство DisabledEfaultui карты на True:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 7, DisabledEfaultui: true, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </script> </head> <body> <div Id = "GoogleMap"> </div> </body> </html>Карты Google - Откройте все наборы управления
Некоторые наборы управления появляются на карте по умолчанию, а другие - нет, если вы не установите их.
Установите элемент управления на True, чтобы сделать его видимым - установите элемент управления FALSE, чтобы скрыть его.
Следующий пример позволяет всем элементам управления:
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 7, Pancontrol: True, Zoomcontrol: True, MaptyPecontrol: True, ScaleControl: True, StreetViewControl: True, OverviewMapControl: Trut, RotateControl: true, maptypeid. }; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </script> </head> <body> <div Id = "GoogleMap"> </div> </body> </html>Карты Google - изменить набор управления
Некоторые элементы управления картой настраиваются. Измените набор элементов управления путем создания поля опции управления.
F Например, опция для изменения управления Zoom указывается в ZoomControloptions. ZoomControloptions содержит следующие 3 варианта:
1.google.maps.zoomcontrolstyle.small - Покажите управление увеличением минимизации
2. google.maps.zoomcontrolstyle.large - отображать стандартные регуляторы скольжения Zoom
3. Google.maps.zoomcontrolstyle.default-Select Наиболее подходящий элемент управления на основе устройства и размера карты
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? Google.maps.latlng (51.508742, -0.120850), Zoom: 7, ZoomControl: True, ZoomControloptions: {style: google.maps.zoomcontrolstyle.small}, Maptypeid: Google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </script> </head> <body> <div Id = "GoogleMap"> </div> </body> </html>ПРИМЕЧАНИЕ. Если вам нужно изменить управление, сначала включите элемент управления (установите его на True).
Другим управлением является управление Maptype.
Управление Maptype может отображаться как один из следующих вариантов стиля:
1.google.maps.maptypecontrolstyle.horizontal_bar, используемый для отображения набора элементов управления в качестве кнопок, как показано на картах Google в горизонтальной полосе.
2. google.maps.maptypecontrolstyle.dropdown_menu, для отображения единой кнопки управления, чтобы вы выбрали тип карты в раскрывающемся меню.
3. google.maps.maptypecontrolstyle.default, используемый для отображения поведения «по умолчанию», что зависит от размера экрана и может измениться в более поздних версиях API.
Пример
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 7, MaptyPecontrol: True, MaptyPecontroloptions: {style: Google.maps.maptypecontrolstyle.dropdown_menu}, maptypeid: google.maps.maptyle.ropdown_menu}, maptypeid: google.maps.maptyle. var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </script> </head> <body> <div Id = "GoogleMap"> </div> </body> </html>Кроме того, вы можете использовать свойство ControlPosition, чтобы указать местоположение управления:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js? google.maps.latlng (51.508742, -0.120850), Zoom: 7, MaptyPecontrol: True, MaptyPecontroloptions: {style: Google.maps.maptypecontrolstyle.dropdown_menu, позиция: google.maps.controlposition.top_center, maptypeped google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), MapProp);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </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); // Добавить домашний контроль, который возвращает пользователя в лондонфункцию HomeControl (controdiv, map) {controldiv.style.padding = '5px'; var controlui = document.createElement ('div'); controlui.style.backgroundcolor = 'желтый'; controlui.style.border = '1px solid'; controlui.style.cursor = 'pointer'; controlui.style.textalign = 'center'; Controlui.title = 'Установить карту в Лондон'; controldiv.appendchild (controlui); var controltext = document.createElement ('div'); controltext.style.fontfamily = 'arial, sans-serif'; controltext.style.fontsize = '12px'; controltext.style.paddingleft = '4px'; controltext.style.paddingright = '4px'; controltext.innerhtml = '<b> home <b>' controlui.appendchild (controltext); // Установка Click-Event Listener: просто установите карту в Лондон Google.maps.event.adddomListener (ControlUI, 'click', function () {map.setCenter (london)});} function initiaze () {var mapdiv = document.getelementbyid ('googlemap'); var myoptions = {Zoom: 12, Center: London, MaptyPeid: Google.maps.maptypeid.roadmap} map = new Google.maps.map (mapdiv, myoptions); // Создать div для удержания управления и вызовать homecontrol () var homecontroldiv = document.createElement ('div'); var homecontrol = new HomeControl (homecontroldiv, map); // homecontroldiv.index = 1; map.controls [google.maps.controlposition.top_right] .push (homecontroldiv);} google.maps.event.adddomlistener (окно, «загрузка», инициализация); </script> </head> <body> <div id = "Googlemap"> </div> </body> </html>Выше приведено информация, разбирающая набор управления картой Google. Мы будем продолжать добавлять соответствующие знания в будущем. Я надеюсь, что друзья, которые могут помочь разработать приложения Google Map. Спасибо за поддержку этого сайта!