Comment utiliser JS et Baidu Maps pour implémenter la fonction de recherche dans la zone cartographique-js tutoriel-php.cn

Comment utiliser JS et Baidu Maps pour implémenter la fonction de recherche dans la zone cartographique

PHPz

Libérer： 2023-11-21 10:53:17

original

1190 Les gens l'ont consulté

Comment utiliser JS et Baidu Maps pour implémenter la fonction de recherche dans la zone cartographique

Avec le développement rapide de l'Internet mobile, les applications cartographiques sont devenues l'un des outils indispensables dans la vie quotidienne des gens. Parmi les nombreuses applications cartographiques, Baidu Maps est l'une des plus populaires. Baidu Maps fournit des données cartographiques riches et de puissantes interfaces API, offrant aux développeurs de nombreuses possibilités. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de recherche dans la zone de la carte et donne des exemples de code spécifiques.

Tout d'abord, nous devons présenter la bibliothèque JS de l'API Baidu Map. Introduisez le code suivant dans la balise du HTML : 标签中引入以下代码：

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

Copier après la connexion

这里的 ak 是您在百度地图开放平台申请的密钥，如果您还没有申请，可以去[百度地图开放平台](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)申请一个。

接下来，我们需要创建一个地图容器来显示地图。在HTML的 <body> 标签中创建一个 <div> 元素，并为其设置一个唯一的 id ，如下所示：

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

Copier après la connexion

然后，我们可以在JS代码中通过获取该 id 来创建一个地图对象，并设置地图显示的初始中心点和缩放级别，如下所示：

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置地图初始中心点
map.centerAndZoom(point, 15); // 设置地图初始缩放级别

Copier après la connexion

这里的 BMap.Map 是百度地图API提供的地图构造函数，通过 BMap.Point 创建一个地图中心点对象，然后通过 map.centerAndZoom 方法设置地图的中心点和缩放级别。

接下来，我们需要添加一个搜索输入框和搜索按钮，用于用户输入搜索关键词和触发搜索操作。在HTML的 <body> 标签中添加以下代码：

<input type="text" id="keyword" placeholder="请输入搜索关键词">
<button onclick="search()">搜索</button>

Copier après la connexion

然后，在JS代码中获取用户输入的搜索关键词，并通过百度地图API的 searchInBounds 方法进行区域内的搜索，如下所示：

function search() {
  var keyword = document.getElementById("keyword").value;
  var bounds = map.getBounds(); // 获取地图可视区域范围
  var searchOptions = {
    onSearchComplete: function(results) {
      // 处理搜索结果
      console.log(results);
    }
  };
  var localSearch = new BMap.LocalSearch(map, searchOptions);
  localSearch.searchInBounds(keyword, bounds);
}

Copier après la connexion

这里的 map.getBounds() 方法返回地图当前可视区域的范围，BMap.LocalSearch 是百度地图API提供的本地搜索构造函数，通过 localSearch.searchInBounds 方法进行区域内的关键词搜索。

最后，我们可以在搜索结果的回调函数中处理搜索结果，比如在地图上显示搜索结果的标记点。可以使用 BMap.Marker 构造函数来创建标记点，并通过 map.addOverlay

var searchOptions = {
  onSearchComplete: function(results) {
    map.clearOverlays(); // 清除地图上的所有标记点
    for (var i = 0; i < results.getCurrentNumPois(); i++) {
      var poi = results.getPoi(i);
      var point = poi.point;
      var marker = new BMap.Marker(point); // 创建标记点
      map.addOverlay(marker); // 添加标记点到地图上
    }
  }
};

Copier après la connexion

Le ak voici la clé que vous avez demandée sur la plateforme ouverte Baidu Map, si vous avez pas encore appliqué, vous pouvez accéder à la [Baidu Map Open Platform](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey) pour en faire la demande.

Ensuite, nous devons créer un conteneur de carte pour afficher la carte. Créez un élément

<div> dans la balise  du HTML et définissez-lui un id unique, comme indiqué ci-dessous : rrreee
 Ensuite, nous pouvons créer un objet cartographique en code JS en obtenant le id et en définissant le point central initial et le niveau de zoom de l'affichage de la carte, comme indiqué ci-dessous : 
rrreee🎜Ici BMap .Map est le constructeur de carte fourni par l'API Baidu Map. Il crée un objet de point central de la carte via BMap.Point, puis transmet la méthode map.centerAndZoom qui définit le paramètre. point central et niveau de zoom de la carte. 🎜🎜Ensuite, nous devons ajouter une zone de saisie de recherche et un bouton de recherche permettant aux utilisateurs de saisir des mots-clés de recherche et de déclencher des opérations de recherche. Ajoutez le code suivant dans la balise  du HTML : 🎜rrreee🎜 Ensuite, récupérez les mots-clés de recherche saisis par l'utilisateur dans le code JS et utilisez le searchInBounds Méthode de recherche dans la zone, comme indiqué ci-dessous : 🎜rrreee🎜La méthode <code>map.getBounds() renvoie ici la plage de la zone visible actuelle de la carte, BMap .LocalSearch est le constructeur de recherche locale fourni par l'API Baidu Map qui utilise la méthode localSearch.searchInBounds pour effectuer des recherches par mots clés dans la zone. 🎜🎜Enfin, nous pouvons traiter les résultats de la recherche dans la fonction de rappel des résultats de la recherche, comme par exemple afficher les points marqués des résultats de la recherche sur la carte. Les marqueurs peuvent être créés à l'aide du constructeur BMap.Marker et ajoutés à la carte via la méthode map.addOverlay, comme indiqué ci-dessous : 🎜rrreee🎜À ce stade, nous tous les codes La mise en œuvre de la fonction de recherche dans la zone cartographique à l'aide de JS et de l'API Baidu Map est terminée. Ensuite, vous pouvez optimiser et développer davantage en fonction de vos propres besoins, comme ajouter des styles personnalisés, cliquer sur des marqueurs pour afficher plus d'informations, etc. 🎜🎜Résumé : 🎜Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de recherche dans la zone de la carte et donne des exemples de code spécifiques. Grâce à l'API Baidu Map, nous pouvons facilement rechercher des mots-clés dans la zone sur la carte et afficher les résultats de la recherche. J'espère que cet article vous a été utile et je vous souhaite du succès dans votre développement ! 🎜

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!