Conjunto de control de mapa de Google
Google Maps - Configuración de control predeterminada:
Al usar un Google Maps estándar, su configuración predeterminada es la siguiente:
1.zoom: muestre un control deslizante para controlar el nivel de zoom del mapa
2.ppan-el mapa muestra un control de tazón de fondo plano, haga clic en 4 esquinas para pan del mapa
3.MapType - Permite a los usuarios cambiar entre tipos de mapas (hoja de ruta y satallite)
4. StreetView: se muestra como un icono de villano de Street View, puede arrastrar a un punto en el mapa para abrir la vista de la calle
Google Maps: más conjuntos de control
Además del conjunto de control predeterminado anterior, Google también tiene:
. Escala - Mostrar escala de mapas
. Rotate - muestra un pequeño icono de circunferencia que puede rotar el mapa
Mapa .verview: vea el mapa desde una perspectiva de área amplia
Al crear un mapa, puede especificar qué conjuntos de control se muestran a través de las opciones de configuración o cambiar las opciones de configuración del mapa llamando a SetOptions ().
Google Maps: desactive el conjunto de control predeterminado
Es posible que desee poder desactivar el conjunto de control predeterminado.
Para desactivar el conjunto de control predeterminado, establezca la propiedad del DiscapededFaultui del mapa en verdadero:
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor Google.maps.latlng (51.508742, -0.120850), Zoom: 7, DisabledFaultui: True, MapTypeid: Google.Maps.MapTypeid.Roadmap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <Div Id = "GoogleMap"> </div> </body> </html>Google Maps: abra todos los conjuntos de control
Algunos conjuntos de control aparecen en el mapa por defecto, mientras que otros no, a menos que los establezca.
Establezca el control en verdadero para hacerlo visible: configure el control en falso para ocultarlo.
El siguiente ejemplo habilita todos los controles:
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor google.maps.latlng (51.508742, -0.120850), Zoom: 7, Pancontrol: true, zoomControl: true, maptypecontrol: true, scaleControl: true, streetViewControl: true, overviewMapControl: true, rotateControl: true, maptypeid: google.mapsap }; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <Div Id = "GoogleMap"> </div> </body> </html>Google Maps: modificar el conjunto de control
Algunos controles de mapas son configurables. Cambie el conjunto de control creando el campo de la opción de control.
F Por ejemplo, la opción de modificar el control de zoom se especifica en ZoomControloptions. ZoomControloptions contiene las siguientes 3 opciones:
1.google.maps.zoomControlstyle.small - Mostrar control de zoom de minimización
2.google.maps.zoomControlStyle.Large - Mostrar controles de deslizamiento de zoom estándar
3.google.maps.zoomcontrolstyle.default-select El control más adecuado según el tamaño del dispositivo y el mapa
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor 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 (Window, 'Load', Initialize); </script> </head> <body> <Div Id = "GoogleMap"> </div> </body> </html>Nota: Si necesita modificar un control, primero encienda el control (configúrelo en verdadero).
Otro control es el control MapType.
El control MapType se puede mostrar como una de las siguientes opciones de estilo:
1.google.maps.mapTypecontrolstyle.horizontal_bar, utilizado para mostrar un conjunto de controles como botones como se muestra en Google Maps en la barra horizontal.
2.google.maps.mapTyPeControlStyle.dropdown_menu, para mostrar un solo control de botón para que seleccione el tipo de mapa en el menú desplegable.
3.google.maps.mapTyPeControlStyle.default, utilizado para mostrar el comportamiento "predeterminado", que depende del tamaño de la pantalla y puede cambiar en versiones posteriores de la API.
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor Google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypecontrol: true, maptypeControlOptions: {style: google.maps.maptypeControlstyle.dropdown_menu}, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <Div Id = "GoogleMap"> </div> </body> </html>Además, puede usar la propiedad ControlPosition para especificar la ubicación del control:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor Google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeControl: true, maptypeControlOptions: {style: google.maps.mapTypeControlstyle.dropdown_menu, posición: google.maps.concrolposition.top_center}, maptypeid: maptypeid: Google.maps.mapTypeid.RoadMap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <Div Id = "GoogleMap"> </div> </body> </html>Google Maps - Conjunto de control personalizado
Cree un control personalizado para regresar a Londres para hacer clic en eventos: (si el mapa está arrastrado):
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var map; var londin = newd Google.maps.latlng (51.508742, -0.120850); // Agregue un control doméstico que devuelva al usuario a LondonFunction Homecontrol (Controldiv, MAP) {Controldiv.style.padding = '5px'; var controlui = document.createElement ('div'); controlui.style.backgroundcolor = 'Yellow'; controlui.style.border = '1px Solid'; controlui.style.cursor = 'Pointer'; controlui.style.textalign = 'Center'; controlui.title = 'Establecer mapa en Londres'; contratdiv.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); // Configurar el oyente de clics de clic: simplemente configure el mapa en Londres Google.maps.event.adddomListener (controlui, 'click', function () {map.setCenter (londres)});} function inicialize () {var mapDiv = document.getElementByid ('googleMap'); var myOptions = {Zoom: 12, Center: Londres, MapTypeid: Google.Maps.MapTypeid.RoadMap} MAP = nuevo Google.maps.map (MapDiv, myOptions); // Cree un DIV para mantener el control y llamar a 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 (Window, 'load', inicialize); </script> </head> <body> <diM id = "googlemap"> </div> </body> </html>Lo anterior es la información que clasifica el conjunto de control de mapa de Google. Continuaremos agregando conocimiento relevante en el futuro. Espero que los amigos que puedan ayudar a desarrollar aplicaciones de mapa de Google. ¡Gracias por su apoyo para este sitio!