Conjunto de controle do mapa do Google
Google Maps - Configurações de controle padrão:
Ao usar um Maps do Google padrão, suas configurações padrão são as seguintes:
1.Zoom - mostre um controle deslizante para controlar o nível de zoom do mapa
2.PPAN-O mapa mostra um controle de tigela de fundo plano, clique em 4 cantos para panificar o mapa
3.MaPtype - permite que os usuários alternem entre os tipos de mapa (roteiro e satallite)
4. Streetview - exibido como um ícone de vilão de rua, você pode arrastar -se para um ponto no mapa para abrir a View Street View
Google Maps - mais conjuntos de controle
Além do conjunto de controle padrão acima, o Google também possui:
.Scale - Mostrar escala de mapa
.Rotate - mostra um pequeno ícone de circunferência que pode girar o mapa
.Verview Mapa - Veja o mapa de uma ampla perspectiva de área
Ao criar um mapa, você pode especificar quais conjuntos de controle são exibidos através das opções de configuração ou alterar as opções de configuração do mapa chamando as SETOptions ().
Google Maps - Desligue o conjunto de controle padrão
Você pode desligar o conjunto de controle padrão.
Para desligar o conjunto de controle padrão, defina a propriedade do DisableDefaultUi do mapa como True:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função google.maps.latlng (51.508742, -0.120850), zoom: 7, desabilablefaultui: true, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);} google.maps.event.adddomListener (window, 'carregamento', inicializar); </script> </head> <body> <rd id id 'Google Maps - Abra todos os conjuntos de controle
Alguns conjuntos de controle aparecem no mapa por padrão, enquanto outros não, a menos que você os defina.
Defina o controle como True para torná -lo visível - defina o controle como false para ocultá -lo.
O exemplo a seguir permite todos os controles:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função Google.maps.latlng (51.508742, -0.120850), Zoom: 7, Pancontrol: True, ZoomControl: True, MapTypecontrol: True, ScalEControl: True, StreetViewControl: True, UPLIVEVERVILEMPCONTRO }; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);} google.maps.event.adddomListener (window, 'carregamento', inicializar); </script> </head> <body> <rd id id 'Google Maps - Modificar Conjunto de Controle
Alguns controles de mapa são configuráveis. Altere o conjunto de controle criando o campo da opção de controle.
F Por exemplo, a opção de modificar o controle de zoom é especificada em ZoomControlOptions. ZoomControlOptions contém as seguintes 3 opções:
1.GOOGLE.MAPS.ZOOMCONTROLSTYLE.SMALL - MOSTRAR CONTROLE DE ZOOM DE MINDAÇÃO
2.GOOGLE.MAPS.ZOOMCONTROLSTYLE.LARGE - Exibir controles deslizantes de zoom padrão
3.google.maps.zoomControlStyle.Default-Select O controle mais adequado com base no tamanho do dispositivo e do mapa
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função google.maps.latlng (51.508742, -0.120850), zoom: 7, zoomControl: true, zoomControlOptions: {style: google.maps.zoomcontrolstyle.small}, maptypeid: google.maps.maptypeid.mall}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);} google.maps.event.adddomListener (window, 'carregamento', inicializar); </script> </head> <body> <rd id id 'Nota: Se você precisar modificar um controle, primeiro ligue o controle (defina -o como true).
Outro controle é o controle MapType.
O controle MapType pode ser exibido como uma das seguintes opções de estilo:
1.GOOGLE.MAPS.MAPTYPECONTROLSTYLE.horizontal_bar, usado para exibir um conjunto de controles como botões, como mostrado no Google Maps na barra horizontal.
2.GOOGLE.MAPS.MAPTYPECONTROLSTYLE.Dropdown_Menu, para exibir um único controle de botão para selecionar o tipo de mapa no menu suspenso.
3.GOOGLE.MAPS.MAPTYPECONTROLSTYLE.Default, usado para exibir o comportamento "padrão", que depende do tamanho da tela e pode mudar nas versões posteriores da API.
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função 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, 'carregamento', inicializar); </script> </head> <body> <rd id id 'Além disso, você pode usar a propriedade ControlPosition para especificar a localização do controle:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função Google.maps.latlng (51.508742, -0.120850), Zoom: 7, MapTypecontrol: true, MapTypecontrolOptions: {style: google.maps.maptypeControlstyle.dropdown_menter, posicionamento: google.maps.Control. google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);} google.maps.event.adddomListener (window, 'carregamento', inicializar); </script> </head> <body> <rd id id 'Google Maps - Conjunto de controle personalizado
Crie um controle personalizado para retornar a Londres para clicar em eventos: (se o mapa for arrastado):
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742, -0.120850); // Adicione um controle doméstico que retorne o usuário ao 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 = 'ponteiro'; controlui.style.TexTalign = 'Center'; controlui.title = 'Definir mapa para Londres'; Controldiv.AppendChild (Controlui); var ControlText = document.createElement ('div'); ControlText.style.fontfamily = 'Arial, sem serrif'; controlText.style.fontsize = '12px'; controlText.style.paddingleft = '4px'; controlText.style.paddingright = '4px'; controlText.innerhtml = '<b> home <b>' controlui.appendChild (controlText); // Configurar o ouvinte de clique em Event: basta definir o mapa para Londres google.maps.event.adddomListener (Controlui, 'click', function () {map.setCenter (London)});} função inicialize () {var mapDiv = document.getElementById ('googleMap'); var myoptions = {zoom: 12, centro: Londres, maptypeid: google.maps.maptypeid.roadmap} map = new google.maps.map (mapDiv, mioptções); // Crie uma div para manter o controle e chamar o HOMECONTROL () var homeControldiv = document.createElement ('div'); var homeControl = novo HomeControl (HomeControldiv, mapa); // HomeControldiv.index = 1; map.Controls [google.maps.controlposition.top_right] .push (homeControldiv);} google.maps.event.adddomListener (window, 'load', Initialize); </script> </head> <body> <dd id id 'O exposto acima está as informações que classificam o conjunto de controle do mapa do Google. Continuaremos a adicionar conhecimento relevante no futuro. Espero que os amigos que possam ajudar a desenvolver aplicativos do Google Map. Obrigado pelo seu apoio a este site!