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
Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts
1. Docker installieren Öffnen Sie zunächst die Li...
Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben
Debug-Zweig Während der normalen Entwicklung eine...
DOCTYPE-Element ausführliche Erklärung vollständige Version
1. Übersicht In diesem Artikel wird das DOCTYPE-E...
MySQL-Abfrage-Cache und Pufferpool
1. Caches - Abfrage-Cache Die folgende Abbildung ...
Verwenden von Docker zum Erstellen statischer Website-Anwendungen (mehrere Möglichkeiten)
Es gibt viele Server, die statische Websites host...
So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux
Häufig verwendete Befehle für Linux-Partitionen: ...
Detaillierte Erklärung des Plattformbusses des Linux-Treibers
Inhaltsverzeichnis 1. Einführung in den Plattform...
Vue realisiert einfachen Effekt des Lauflichts
In diesem Artikel wird der spezifische Code von V...
Detaillierte Erläuterung verschiedener Möglichkeiten zur Installation von CMake unter Ubuntu
apt installiere CMake sudo apt installiere cmake ...
Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell
Wie oben gezeigt, sind Füllwerte zusammengesetzte...
MySQL implementiert die Erhöhung oder Verminderung des angegebenen Zeitintervalls für alle Zeiten in der aktuellen Datentabelle (empfohlen)
Die Funktion DATE_ADD() addiert einem Datum ein a...
So verwenden Sie Anti-Shake und Throttling in Vue
Inhaltsverzeichnis Vorwort Konzept Stabilisierung...
MySQL 8.0.19 Installations-Tutorial
Laden Sie das Installationspaket von der offiziel...
JavaScript-Implementierung des Beispiels für die Schaltfläche „Zurück nach oben“
In diesem Artikel wird der spezifische Code für J...
So implementieren Sie eine Maskenebene in HTML So verwenden Sie eine Maskenebene in HTML
Die Verwendung von Maskenebenen in Webseiten kann...