Detaillierte Schritte zum Einbetten von Baidu Maps in Webseiten und zur Verwendung der Baidu Maps API zum Anpassen von Karten
|
Fügen Sie die Baidu-Karte in die Webseite ein Wenn Sie Baidu Maps zu Ihrer eigenen Webseite hinzufügen möchten, können Sie die Baidu Maps API verwenden. Die spezifische Verwendung ist wie folgt: Schritt 1: Gehen Sie zur Kartenerstellungswebsite von Baidu http://api.map.baidu.com/lbsapi/creatmap/ und suchen Sie nach dem Standort, den Sie anzeigen möchten, wie in der Abbildung unten gezeigt. Schritt 2: Karte festlegen. Sie können die Breite und Höhe der auf der Website angezeigten Karte festlegen und die anderen Optionen unverändert lassen. Schritt 3: Anmerkungen hinzufügen. Suchen Sie nach dem Klicken auf das erste Symbol Ihre Position auf der rechten Seite und klicken Sie mit der linken Maustaste, um sie zu lokalisieren. Die Form des Markierungssymbols kann geändert werden, und Name und Notizen können mit ortsbezogenen Informationen gefüllt werden. Schritt 4: Holen Sie sich den Code. Fügen Sie den Code einfach in Ihre Webseite ein. Der Code lautet wie folgt: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" /> <meta name="keywords" content="Baidu Map, Baidu Map API, Baidu Map-Anpassungstool, Baidu Map WYSIWYG-Tool" /> <meta name="description" content="Baidu Map API – benutzerdefinierte Karte, hilft Benutzern bei der Erstellung von Baidu-Karten unter visueller Bedienung" /> <title>Benutzerdefinierte Karte der Baidu Map API</title> <!--Zitat Baidu Map API--> <style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {Farbe:#CC5522;Schriftgröße:14px;Schriftstärke:fett;Überlauf:versteckt;Padding-rechts:13px;Weißraum:nowrap} .iw_poi_content {Schriftart: 12px Arial, serifenlos; Überlauf: sichtbar; Polsterung oben: 4px; Leerzeichen: -moz-pre-wrap; Zeilenumbruch: Wortumbruch} </Stil> <script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>> </Kopf></p> <p><Körper> <!--Baidu-Kartencontainer--> <div Stil="Breite:697px;Höhe:550px;Rand:#ccc durchgezogen 1px;" </body> <Skripttyp="text/javascript"> //Erstellen und initialisieren Sie die Map-Funktion: Funktion initMap(){ createMap(); //Eine Karte erstellen setMapEvent(); //Kartenereignis festlegen addMapControl(); //Steuerelemente zur Karte hinzufügen } //Eine Map-Funktion erstellen: Funktion createMap(){ var map = new BMap.Map("dituContent"); //Erstelle eine Karte im Baidu-Kartencontainer var point = new BMap.Point(113.116257,27.822879); //Definieren Sie eine Mittelpunktskoordinate map.centerAndZoom(point,17); //Mittelpunkt und Koordinaten der Karte festlegen und Karte im Kartencontainer anzeigen window.map = map; //Die Map-Variable global speichern } //Funktion zur Einstellung von Kartenereignissen: Funktion setMapEvent(){ map.enableDragging(); //Kartenziehereignisse aktivieren, standardmäßig aktiviert (optional) map.enableScrollWheelZoom(); //Aktiviere das Scrollrad der Karte zum Vergrößern und Verkleinern map.enableDoubleClickZoom(); //Maus-Doppelklick-Zoom aktivieren, standardmäßig aktiviert (optional) map.enableKeyboard(); //Aktiviere die Auf-, Ab-, Links- und Rechtstasten auf der Tastatur, um die Karte zu verschieben } //Map-Steuerelement hinzufügen-Funktion: Funktion addMapControl(){ //Fügen Sie der Karte ein Zoom-Steuerelement hinzu var ctrl_nav = neues BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(Strg_Navigation); //Fügen Sie der Karte ein Miniaturbild-Steuerelement hinzu var ctrl_ove = neues BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //Fügen Sie der Karte ein Maßstabsteuerelement hinzu var ctrl_sca = neues BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } initMap(); //Karte erstellen und initialisieren </Skript> </html> |
>>: Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1
Artikel empfehlen
CocosCreator Universal Framework Design Network
Inhaltsverzeichnis Vorwort WebSocket verwenden Er...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
15-minütiges paralleles Artefakt GNU Parallel Erste Schritte
GNU Parallel ist ein Shell-Tool zum parallelen Au...
Lösung für langsame Netzwerkanforderungen im Docker-Container
Bei der Verwendung von Docker wurden mehrere Prob...
So ändern Sie das Anfangskennwort eines Benutzers in mysql5.7
Wenn Benutzer MySQL-Datenbanken zum ersten Mal in...
Spezielle Befehle in der MySql-Datenbankabfrage
Erstens: Installation von MySQL Laden Sie die MyS...
Erstellen eines Image-Servers mit FastDFS unter Linux
Inhaltsverzeichnis Serverplanung 1. Systemkompone...
Praktisches Beispiel einer virtuellen Vue-Liste
Inhaltsverzeichnis Vorwort Design erreichen Zusam...
Die HTML-Tag-ID kann eine Variable sein
<table id=" <%=var1%>">, der...
So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4
Nach dem Upgrade von MySQL auf Version 5.7 wurde ...
JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle
In diesem Artikel wird der spezifische Code für J...
Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)
Der Meta-Tag ist ein Hilfstag im Head-Bereich der...
Anwendungsbeispiele für die MySQL-Volltextsuche
Inhaltsverzeichnis 1. Umweltvorbereitung 2. Daten...
Neue Verwendung von watch und watchEffect in Vue 3
Inhaltsverzeichnis 1. Neue Verwendung der Uhr 1.1...
So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort
1. Installation apt-get install mysql-server erfo...