Google Map Control Set
Google Maps - Standardsteuerungseinstellungen:
Bei Verwendung eines Standard -Google Maps sind die Standardeinstellungen wie folgt:
1. Zoom - Zeigen Sie einen Schieberegler an, um die Zoomebene der Karte zu steuern
2.PPAN-Die Karte zeigt eine schalenähnliche Kontrolle mit flachem Boden und klicken Sie auf 4 Ecken, um die Karte zu schwenken
3.Maptype - Ermöglicht Benutzern, zwischen Kartentypen (Roadmap und Satallit) zu wechseln
4. StreetView - Als Street View -Bösewichtsymbol können Sie zu einem Punkt auf der Karte ziehen, um die Street View zu öffnen
Google Maps - Weitere Steuerungssätze
Zusätzlich zum obigen Standardsteuerungssatz hat Google auch:
.Scale - MAP -Skala anzeigen
.Rotate - zeigt ein kleines Umfangsymbol, das die Karte drehen kann
.VerView -Karte - Sehen Sie sich die Karte aus einer weiten Bereichsperspektive an
Beim Erstellen einer Karte können Sie angeben, welche Steuersätze über die Einstellungsoptionen angezeigt werden oder die Einstellungsoptionen der Karte durch Aufrufen von SetOptions () ändern.
Google Maps - Schalten Sie den Standardsteuersatz aus
Möglicherweise möchten Sie in der Lage sein, den Standardsteuerungssatz auszuschalten.
Um den Standardsteuerungssatz auszuschalten, setzen Sie die Eigenschaft des DeaktiviertenFaultui der Karte auf true:
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new google.maps.latlng (51.508742, -0.120850), Zoom: 7, deaktiviertesFaultUi: true, mapTypeid: google.maps.maptyped.roadMap}; var map = new Google.maps.map (document.getElementById ("googeLemap"), mapProp);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html> </htm> </htm> </htm> </htm> </htm> </htm>Google Maps - Öffnen Sie alle Kontrollsätze
Einige Steuerungssätze werden standardmäßig auf der Karte angezeigt, andere nicht, es sei denn, Sie setzen sie.
Stellen Sie das Steuerelement auf True ein, um es sichtbar zu machen. Stellen Sie die Steuerung auf False ein, um es zu verbergen.
Das folgende Beispiel ermöglicht alle Steuerelemente:
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new 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.maps.maptypeid.roadMap}; var map = new Google.maps.map (document.getElementById ("googeLemap"), mapProp);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html> </htm> </htm> </htm> </htm> </htm> </htm>Google Maps - Steuerungssatz ändern
Einige Kartensteuerungen sind konfigurierbar. Ändern Sie die Steuerung, indem Sie das Feld der Steuerungsoption erstellen.
F beispielsweise ist die Option zur Änderung der Zoomsteuerung in Zoomcontroloptions angegeben. ZoomControloptions enthält die folgenden 3 Optionen:
1.google.maps.zoomcontrolStyle.small - Minimierungs -Zoomkontrolle zeigen
2.google.maps.zoomcontrolStyle.large - Standard -Zoom -Schieberegelung anzeigen
3.google.maps.zoomControlStyle.Default-Select Die am besten geeignete Steuerung basierend auf Gerät und Kartengröße
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new 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 ("googeLemap"), mapProp);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html> </htm> </htm> </htm> </htm> </htm> </htm>HINWEIS: Wenn Sie ein Steuerelement ändern müssen, schalten Sie zunächst das Steuerelement ein (setzen Sie es auf true).
Eine weitere Steuerung ist die MAPType -Steuerung.
Die MAPType -Steuerung kann als eine der folgenden Optionen für Stiloptionen angezeigt werden:
1.google.maps.maptypeControlStyle.Horizontal_Bar, verwendet, um einen Satz von Steuerelementen als Schaltflächen anzuzeigen, wie in Google Maps in der horizontalen Balken gezeigt.
2.google.maps.maptypeControlStyle.dropdown_Menu zum Anzeigen eines einzelnen Schaltflächensteuerungen, damit Sie den Kartentyp im Dropdown-Menü auswählen.
3.google.maps.maptypeControlStyle.Default, verwendet, um das "Standard" -Vorform anzuzeigen, das von der Bildschirmgröße abhängt und sich in späteren Versionen der API ändern kann.
Beispiel
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new 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 ("googeLemap"), mapProp);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html> </htm> </htm> </htm> </htm> </htm> </htm>Außerdem können Sie die Steuerelement -Eigenschaft verwenden, um den Ort der Steuerung anzugeben:
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>function initialize(){ var mapProp = { center: new google.maps.latlng (51.508742, -0.120850), Zoom: 7, MAPTYPECONTROL: TRUE, MAPTYPECONTROLOPTIONS: {style: google.maps.maptypeControlstyle.dropdown_menu, Position: Google.Maps.Controlposition.Top_top_cors, MACTTYPEID.MAPS.CONTROLPOSION. google.maps.maptypeid.roadMap}; var map = new Google.maps.map (document.getElementById ("googeLemap"), mapProp);} google.maps.event.addomListener (Fenster, 'laden', initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html> </htm> </htm> </htm> </htm> </htm> </htm>Google Maps - benutzerdefinierter Steuerungssatz
Erstellen Sie eine benutzerdefinierte Steuerung, um nach London zurückzukehren, um auf Ereignisse zu klicken: (Wenn die Karte gezogen wird):
Beispiel
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js?key=aizydydy0kkjitpvd2u7atoAWHC9YSH6OHXOIM&sensor=false"> </script> var map; var map; var map; google.maps.latlng (51.508742, -0.120850); // Fügen Sie eine Heimsteuerung hinzu, die den Benutzer in LondonFunction Homecontrol (Controldiv, MAP) zurücksetzt. var kontrollui = document.createelement ('div'); controlui.style.backgroundColor = 'gelb'; controlui.style.border = '1px fest'; contrelUi.Style.cursor = 'pointer'; ControlUi.Style.textalign = 'Center'; controlui.title = 'MAP in London setzen'; Controldiv.AppendChild (ControlUi); var kontrollText = 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); // Setup Click-Event Listener einrichten: Setzen Sie einfach die Karte auf London Google.maps.event.adddomListener (ControlUi, 'Click', function () {map.setCenter (London)});} Funktion initialize () {var mapdiv = document.getElementById ('googlemap'); var myoptions = {zoom: 12, Mitte: London, MAPTYPEID: google.maps.maptypeid.RoadMap} map = new Google.maps.map (MAPDIV, MyOptions); // Erstellen Sie eine DIV, um die Kontrolle zu halten und homecontrol () var homecontroldiv = document.createelement ('div') zu rufen; 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);</script></head><body><div id="googleMap"></div></body></html>Das obige Informationen ist die Informationen, die den Google Map Control Set aussortieren. Wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Ich hoffe, dass Freunde, die helfen können, Google Map -Anwendungen zu entwickeln. Vielen Dank für Ihre Unterstützung für diese Seite!