Ensemble de contrôle de la carte Google
Google Maps - Paramètres de contrôle par défaut:
Lorsque vous utilisez un Google Maps standard, ses paramètres par défaut sont les suivants:
1.Zoom - Afficher un curseur pour contrôler le niveau de zoom de la carte
2.PPAN-La carte montre un contrôle de bol à fond plat, cliquez sur 4 coins pour panoramiser la carte
3.MapType - permet aux utilisateurs de basculer entre les types de cartes (feuille de route et satallite)
4. Streetview - affiché comme une icône de méchant de la vue de la rue, vous pouvez traîner jusqu'à un point sur la carte pour ouvrir la vue de la rue
Google Maps - Plus de jeux de contrôle
En plus de l'ensemble de contrôle par défaut ci-dessus, Google a également:
.Scale - Afficher l'échelle de la carte
.Rotate - montre une petite icône de circonférence qui peut faire tourner la carte
.Verview Carte - Afficher la carte d'un point de vue large
Lors de la création d'une carte, vous pouvez spécifier quels ensembles de contrôle sont affichés via les options de paramètre ou modifier les options de paramètre de la carte en appelant setOptions ().
Google Maps - désactivez l'ensemble de contrôle par défaut
Vous voudrez peut-être pouvoir désactiver l'ensemble de contrôle par défaut.
Pour désactiver l'ensemble de contrôle par défaut, définissez la propriété du DisablefaultUi de la carte sur true:
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop google.maps.latlng (51.508742, -0.120850), Zoom: 7, DisablefaultUi: 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> </ html>Google Maps - Ouvrez tous les ensembles de contrôle
Certains ensembles de contrôle apparaissent sur la carte par défaut, tandis que d'autres ne le font pas, sauf si vous les définissez.
Définissez le contrôle sur true pour le rendre visible - définissez le contrôle sur false pour le masquer.
L'exemple suivant permet tous les contrôles:
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop google.maps.latlng (51.508742, -0.120850), Zoom: 7, Pancontrol: true, zoomControl: true, mapTypeControl: true, true, rotateContre: true, maptypeid: google.maps.maptypeid. }; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', initialize); </script> </-head> </ html>Google Maps - Modifier l'ensemble de contrôle
Certains commandes de carte sont configurables. Modifiez l'ensemble de contrôle en fabriquant le champ d'option de contrôle.
F Par exemple, l'option pour modifier le contrôle de zoom est spécifiée dans ZoomControlOptions. ZoomControlOptions contient les 3 options suivantes:
1.google.maps.zoomontrolstyle.small - Afficher le contrôle du zoom de minimisation
2.google.maps.zoomontrolstyle.large - Afficher les commandes de glissement de zoom standard
3.GOOGLE.MAPS.ZOOMControlstyle.Default-Sélectionnez le contrôle le plus approprié en fonction de l'appareil et de la taille de la carte
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop google.maps.latlng (51.508742, -0.120850), Zoom: 7, ZoomControl: true, ZoomControloptions: {style: google.maps.zoomcontrolstyle.small}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', initialize); </script> </-head> </ html>Remarque: Si vous devez modifier un contrôle, activez d'abord le contrôle (définissez-le sur true).
Un autre contrôle est le contrôle MapType.
Le contrôle MapType peut être affiché comme l'une des options de style suivantes:
1.google.maps.maptypeControlstyle.horizontal_bar, utilisé pour afficher un ensemble de contrôles comme boutons comme indiqué dans Google Maps dans la barre horizontale.
2.google.maps.maptypeControlstyle.dropdown_menu, pour afficher un seul contrôle de bouton afin de sélectionner le type de carte dans le menu déroulant.
3.google.maps.maptypeControlstyle.default, utilisé pour afficher le comportement "par défaut", qui dépend de la taille de l'écran et peut changer dans les versions ultérieures de l'API.
Exemple
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop google.maps.latlng (51.508742, -0.120850), Zoom: 7, MapTypeControl: true, MapTypeControloptions: {style: google.maps.maptypeControlstyle.dropdown_menu}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', initialize); </script> </-head> </ html>Vous pouvez également utiliser la propriété ControlPosition pour spécifier l'emplacement du contrôle:
<Html> <A-head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <script> function initialize () {var mapprop google.maps.latlng (51.508742, -0.120850), Zoom: 7, MapTypeControl: true, MapTypeControloptions: {Style: Google.Maps.MaptypeControlstyle.dropdown_Menu, Position: google.maps.controlposition.top_cener}, Maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} google.maps.event.adddomListener (Window, 'Load', initialize); </script> </-head> </ html>Google Maps - Ensemble de contrôle personnalisé
Créez un contrôle personnalisé pour retourner à Londres pour cliquer sur les événements: (si la carte est traînée):
Exemple
<html> <éad- head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </cript> <prict> var map; var london = new google.maps.latlng (51.508742, -0.120850); // Ajouter un contrôle domestique qui renvoie l'utilisateur à LondonFunction HomeControl (Controldiv, Map) {Controldiv.style.padding = '5px'; var ControlUi = document.CreateElement ('div'); ControlUi.style.backgroundColor = 'Yellow'; ControlUi.style.Border = '1px solide'; ControlUi.style.cursor = 'pointeur'; ControlUi.style.TextAlign = 'Center'; ControlUi.Title = 'Set Map sur Londres'; Controldiv.ApendChild (ControlUi); var contrôleText = document.CreateElement ('div'); ControlText.style.fontfamily = 'Arial, Sans-Serif'; ControlText.style.fontize = '12px'; ControlText.Style.Paddingleft = '4px'; ControlText.style.paddingRight = '4px'; ControlText.InnerHtml = '<b> Home <b>' ControlUi.ApendChild (ControlText); // Configuration de l'écouteur Click-Event: Définissez simplement la carte sur london google.maps.event.adddomListener (ControlUi, 'click', function () {map.setCenter (london)});} function initialize () {var mapdiv = document.getElementById ('googlemap'); var myoptions = {zoom: 12, centre: Londres, mapTypeid: google.maps.maptypeid.roadmap} map = new Google.maps.map (mapdiv, myoptions); // Créer un div pour maintenir le contrôle et appeler 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', Initialize); </dcript> </-head> <dody> <div id = "googlemap"> </div> </odody> </html>Ce qui précède est l'information triant l'ensemble de contrôle Google Map. Nous continuerons d'ajouter des connaissances pertinentes à l'avenir. J'espère que des amis qui pourront aider à développer des applications Google Map. Merci pour votre soutien à ce site!