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>

<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>

<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>

<<: Verwenden von VMware IOInsight zur Durchführung einer verfeinerten Überwachung der Speicherleistung virtueller Maschinen

>>: Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

So ändern Sie die Tomcat-Portnummer in Linux

Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Hintergrund - Online Alert Ein Online-Server hat ...

Detaillierte Schritte zum Einbetten von Baidu Maps in Webseiten und zur Verwendung der Baidu Maps API zum Anpassen von Karten

So ändern Sie die Tomcat-Portnummer in Linux

Zusammenfassung der Fallstricke bei der Verwendung von Nginx als Reverse-Proxy für GRPC

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Detailliertes Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.19 auf Windows Server 2016

So erstellen Sie eine MySQL-Datenbank (de1) mit Befehlen

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux

Detaillierte Erklärung der Docker-Maschinennutzung

Das praktische Gitlab-Tutorial verwendet Git Config für zugehörige Konfigurationsvorgänge

Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux

Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker

Artikel empfehlen

$nextTick-Erklärung, die Sie auf einen Blick verstehen

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten

So zeigen Sie Docker-Containerprotokolle an und bereinigen sie (getestet und effektiv)

Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana

So konfigurieren Sie Nginx's Anti-Hotlinking

Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Erfahren Sie, wie Sie mit dem Docker-Maven-Plugin die Bereitstellung automatisieren

Interpretation des Moduls zum Lastenausgleich mit nginx

So deinstallieren und installieren Sie Tomcat neu (mit Bildern und Text)

Natives js zum Erzielen eines Akkordeoneffekts

Nginx+FastDFS zum Erstellen eines Image-Servers

So fragen Sie Daten aus mehreren unabhängigen Tabellen und Paging in MySQL ab

Vue realisiert den Logistik-Timeline-Effekt

Lösen Sie das Problem der automatischen HTML-Formatierung nach dem Speichern in vscode