Comment utiliser JS et Baidu Maps pour ajouter des marqueurs de localisation personnalisés à la carte

Comment utiliser JS et Baidu Maps pour implémenter la fonction d'ajout de marqueurs de localisation personnalisés à la carte

Introduction : Baidu Maps est un service de carte très couramment utilisé, qui offre une multitude d'affichages de cartes et de fonctions interactives, notamment l'ajout de marque d'emplacements personnalisés. En utilisant JS et l'API Baidu Map, nous pouvons facilement implémenter la fonction d'ajout de marqueurs de localisation personnalisés sur la carte. Voici un exemple de code spécifique :

Étape 1 : Préparation

1. Tout d'abord, importez Baidu dans votre fichier HTML L'API. Le fichier de la carte est le suivant :

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>

2. Créez un élément div du conteneur de la carte dans la page, précisez la largeur et la hauteur, comme indiqué ci-dessous :

   <div id="map" style="width:800px;height:600px;"></div>

3. Ajoutez un bouton ou un autre élément qui déclenche l'événement , utilisez Pour déclencher la fonction d'ajout de marqueurs de localisation, comme indiqué ci-dessous :

   <button id="addMarkerBtn">添加标记</button>

Étape 2 : Ajouter des fonctions de carte et de marqueur

1. Initialisez l'objet cartographique dans JS, comme indiqué ci-dessous :

   var map = new BMap.Map("map");              // 创建地图实例
   var point = new BMap.Point(116.404, 39.915); // 创建一个初始坐标点
   map.centerAndZoom(point, 15);               // 初始化地图，设置中心点和缩放级别
   map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());       // 添加比例尺控件

2. Ajouter une carte événement de clic, utilisé pour cliquer sur la carte pour ajouter des marqueurs de lieu, comme indiqué ci-dessous :

   map.addEventListener("click", function(e) {
    var point = e.point; // 获取点击的坐标点
    var marker = new BMap.Marker(point); // 创建新的地点标记
    map.addOverlay(marker); // 将标记添加到地图上
   });

3. Ajouter des événements de clic sur un bouton, utilisé pour déclencher des événements de clic sur la carte, comme indiqué ci-dessous :

   var addMarkerBtn = document.getElementById("addMarkerBtn");
   addMarkerBtn.addEventListener("click", function() {
    map.addEventListener("click", function(e) {
        var point = e.point; // 获取点击的坐标点
        var marker = new BMap.Marker(point); // 创建新的地点标记
        map.addOverlay(marker); // 将标记添加到地图上
    });
   });

Étape 3 : tester l'effet
Enregistrez le code ci-dessus et ouvrez le fichier HTML dans votre navigateur et vous verrez une page de carte avec la possibilité d'ajouter des marqueurs de localisation personnalisés. Cliquez n'importe où sur la carte et un nouveau marqueur de localisation apparaîtra sur la carte.

Remarque :

• Avant d'utiliser l'API Baidu Map, vous devez vous rendre sur la plateforme ouverte Baidu Map pour demander une clé API et remplacer « votre clé API Baidu Map » dans le code.
• Le code ci-dessus n'est qu'un exemple simple. Dans l'application réelle, le style et le contenu informatif de la marque de localisation doivent être personnalisés.

Résumé :
Grâce aux étapes ci-dessus, nous pouvons utiliser JS et l'API Baidu Map pour implémenter la fonction d'ajout de marqueurs de localisation personnalisés à la carte. Ceci est utile pour les sites Web ou les applications qui doivent marquer des emplacements spécifiques. J'espère que les exemples de code de cet article pourront vous aider !

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!