So zeigen Sie eine Karte auf einer Webseite mit JS und Baidu Maps an

<div id="map"></div>

Legen Sie den Stil des Kartencontainers fest:

#map {
  width: 800px;
  height: 500px;
}

3

Erstellen Sie ein Kartenobjekt in einer JS-Datei und geben Sie dessen Standardzoomstufe und Mittelpunktposition an. Der Code lautet wie folgt:

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); //中心点位置
map.centerAndZoom(point, 12); //设置地图中心点和默认的缩放级别

Die BMap hier ist ein von der Baidu Map API bereitgestelltes Objekt, mit dem Karten und verschiedene Kartenfunktionskomponenten erstellt werden können.

4. Kartensteuerelemente hinzufügen

Fügen Sie einige häufig verwendete Steuerelemente auf Baidu Map hinzu, z. B. Zoomsteuerelemente, Kartentypsteuerelemente, Eagle-Eye-Steuerelemente usw. Der Code lautet wie folgt:

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加鹰眼控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

5. Overlays und Beschriftungen hinzufügen

Das Hinzufügen benutzerdefinierter Overlays und Beschriftungen zur Karte kann über die zugehörigen Objekte von BMap erreicht werden. Fügen Sie beispielsweise eine benutzerdefinierte Anmerkung hinzu:

var marker = new BMap.Marker(point); //创建一个标注
map.addOverlay(marker); //将标注添加到地图中

6. Kartenereignisse binden

Wenn Sie eine Karte verwenden, müssen Sie häufig einige Ereignisse binden, um auf Benutzervorgänge zu reagieren. Wenn der Benutzer beispielsweise auf die Karte klickt, wird der Karte eine Beschriftung hinzugefügt. Der Code lautet wie folgt:

map.addEventListener("click", function(e) {
  var marker = new BMap.Marker(e.point); //创建一个标注
  map.addOverlay(marker); //将标注添加到地图中
});

7. Geokodierung und umgekehrte Geokodierung

Geokodierung und umgekehrte Geokodierung sind wichtige Funktionen in der Karten-API. Bei der Geokodierung werden Textadressen in geografische Koordinaten umgewandelt, während bei der umgekehrten Geokodierung geografische Koordinaten in Textadressen umgewandelt werden. Das Codebeispiel lautet wie folgt:

//地理编码
var geocoder = new BMap.Geocoder();
geocoder.getPoint("北京市海淀区中关村", function(point) {
  //在地图上添加一个标注
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
}, "北京市");

//逆地理编码
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
  var addComp = rs.addressComponents;
  alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
});

Das Obige ist der grundlegende Prozess und die allgemeine Funktionsimplementierung der Verwendung von JS und Baidu Maps zum Anzeigen von Karten auf einer Webseite. Ich glaube, dass Leser durch diese Codebeispiele schnell die Verwendung der Baidu Map API beherrschen und dann umfangreichere und praktischere Kartenanwendungen entwickeln können.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie eine Karte auf einer Webseite mit JS und Baidu Maps an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!