So verwenden Sie JS und Baidu Maps, um die Anzeigefunktion für beliebte Attraktionen der Karte zu implementieren

So verwenden Sie JS und Baidu Maps, um die Anzeigefunktion für beliebte Sehenswürdigkeiten der Karte zu implementieren

Mit der rasanten Entwicklung des Tourismus möchten immer mehr Menschen beliebte Sehenswürdigkeiten auf der ganzen Welt erkunden. Als Website- oder App-Entwickler müssen Sie möglicherweise Informationen zu beliebten Attraktionen auf einer Karte anzeigen, damit Benutzer ihre Reisen leichter verstehen und planen können. In diesem Artikel werde ich die Verwendung von JavaScript und der Baidu Map API zum Implementieren dieser Funktion vorstellen und spezifische Codebeispiele bereitstellen.

Zuerst müssen wir die Karteninstanz über die Baidu Map API abrufen. Fügen Sie ein div-Element zum Anzeigen der Karte in der HTML-Datei hinzu:

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

Als nächstes verwenden wir JavaScript-Code, um die Karte zu initialisieren und den Mittelpunkt und die Zoomstufe festzulegen:

var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 设置中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点和缩放级别

Beginnen wir nun mit der Anzeige der beliebten Attraktionen auf der Karte. Wir gehen davon aus, dass wir bereits über einen Datensatz verfügen, der Informationen zu beliebten Attraktionen enthält. Jede Attraktion verfügt über eine Breiten- und Längenkoordinate sowie andere verwandte Informationen. Wir können diese Informationen in einem Array speichern:

var hotSpots = [
  {
    name: "故宫",
    lng: 116.403875,
    lat: 39.915280
  },
  {
    name: "长城",
    lng: 116.570425,
    lat: 40.431908
  },
  {
    name: "颐和园",
    lng: 116.274919,
    lat: 39.998062
  }
  // 其他景点信息
];

Als nächstes müssen wir das Array beliebter Attraktionen durchlaufen und der Karte Markierungspunkte und Informationsfenster hinzufügen. Sie können die von Baidu Maps bereitgestellten Marker- und InfoWindow-Klassen verwenden, um diese Vorgänge abzuschließen. Das Folgende ist der spezifische Implementierungscode:

for (var i = 0; i < hotSpots.length; i++) {
  var spot = hotSpots[i];
  var point = new BMap.Point(spot.lng, spot.lat); // 创建点坐标
  var marker = new BMap.Marker(point); // 创建标记点
  var infoWindow = new BMap.InfoWindow(spot.name); // 创建信息窗口
  marker.addEventListener("click", function () {
    this.openInfoWindow(infoWindow); // 点击标记点时打开对应的信息窗口
  });
  map.addOverlay(marker); // 添加标记点到地图
}

Im obigen Code durchqueren wir die Reihe beliebter Attraktionen und erstellen für jede Attraktion einen Markierungspunkt und ein Informationsfenster. Anschließend fügen wir die Markierung zur Karte hinzu und öffnen das entsprechende Informationsfenster, wenn der Benutzer auf die Markierung klickt.

Das Obige ist der Beispielcode, der JavaScript und die Baidu-Karten-API verwendet, um die Funktion zum Anzeigen beliebter Sehenswürdigkeiten auf der Karte zu implementieren. Je nach tatsächlichem Bedarf können Sie die Informationen zu Sehenswürdigkeiten in der Liste beliebter Sehenswürdigkeiten sowie den Stil und Inhalt von Markierungspunkten und Informationsfenstern anpassen. Ich hoffe, dieser Artikel ist hilfreich für Sie und wünsche Ihnen eine erfolgreiche Entwicklung!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS und Baidu Maps, um die Anzeigefunktion für beliebte Attraktionen der Karte zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!