Comment utiliser JS et Baidu Maps pour implémenter la fonction d'affichage des attractions populaires de la carte

Comment utiliser JS et Baidu Maps pour implémenter la fonction d'affichage des attractions populaires de la carte

Avec le développement rapide du tourisme, de plus en plus de personnes souhaitent explorer les attractions populaires du monde entier. En tant que développeur de sites Web ou d'applications, vous devrez peut-être afficher des informations sur les attractions populaires sur une carte afin que les utilisateurs puissent plus facilement comprendre et planifier leurs voyages. Dans cet article, je présenterai comment utiliser JavaScript et l'API Baidu Map pour implémenter cette fonction et fournirai des exemples de code spécifiques.

Tout d'abord, nous devons obtenir l'instance de carte via l'API Baidu Map. Ajoutez un élément div pour afficher la carte dans le fichier HTML :

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

Ensuite, nous utilisons le code JavaScript pour initialiser la carte et définir le point central et le niveau de zoom :

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

Maintenant, commençons à afficher les attractions populaires sur la carte. Nous supposons que nous disposons déjà d’un ensemble de données contenant des informations sur les attractions populaires. Chaque attraction possède une coordonnée de latitude et de longitude ainsi que d’autres informations associées. Nous pouvons stocker ces informations dans un tableau :

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

Ensuite, nous devons parcourir l'ensemble des attractions populaires et ajouter des points de repère et des fenêtres d'informations à la carte. Vous pouvez utiliser les classes Marker et InfoWindow fournies par Baidu Maps pour effectuer ces opérations. Voici le code d'implémentation spécifique :

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); // 添加标记点到地图
}

Dans le code ci-dessus, nous parcourons l'éventail d'attractions populaires et créons un point de repère et une fenêtre d'information pour chaque attraction. Nous ajoutons ensuite le marqueur à la carte et ouvrons la fenêtre d'information correspondante lorsque l'utilisateur clique sur le marqueur.

Ce qui précède est un exemple de code qui utilise JavaScript et l'API Baidu Map pour implémenter la fonction d'affichage des attractions populaires sur la carte. En fonction des besoins réels, vous pouvez personnaliser les informations sur les attractions dans le tableau des attractions populaires, ainsi que le style et le contenu des points de repère et des fenêtres d'information. J'espère que cet article vous sera utile et je vous souhaite un développement réussi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!