JS と Baidu Maps を使用して地図エリア内に検索機能を実装する方法

JS と Baidu Maps を使用して地図エリア内に検索機能を実装する方法

モバイル インターネットの急速な発展に伴い、地図アプリケーションは不可欠なツールになりました人々の日常生活の中で 1 つ。数ある地図アプリの中でも、Baidu Maps は最も人気のあるアプリの 1 つです。 Baidu Maps は豊富な地図データと強力な API インターフェイスを提供し、開発者に多くの可能性を提供します。この記事では、JS と Baidu Map API を使用して地図エリア内の検索機能を実装する方法と、具体的なコード例を紹介します。

まず、Baidu Map API の JS ライブラリを導入する必要があります。次のコードを HTML の タグに挿入します:

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

ここの ak は、Baidu Map Open Platform で申請したキーです。アプリケーションをお持ちでない場合は、[Baidu Map Open Platform](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey) にアクセスしてアプリケーションを申請できます。

次に、マップを表示するためのマップ コンテナを作成する必要があります。次のように、HTML の タグ内に <div> 要素を作成し、それに一意の <code>id を設定します。

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

次に、id を取得して JS コードでマップ オブジェクトを作成し、次のようにマップ表示の初期中心点とズーム レベルを設定します。

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

HereBMap.Map は、Baidu Map API が提供する地図コンストラクターです。BMap.Point を通じて地図の中心点オブジェクトを作成し、map.centerAndZoom## を渡します。 # 設定するメソッド地図の中心点とズームレベル。

次に、ユーザーが検索キーワードを入力して検索操作をトリガーできるように、検索入力ボックスと検索ボタンを追加する必要があります。 HTML の

タグに次のコードを追加します。

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

次に、ユーザーが JS コードに入力した検索キーワードを取得し、Baidu の

searchInBounds を使用します。 Map API 以下に示すように、エリア内を検索するメソッド:

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);
}

ここの

map.getBounds() メソッドは、マップの現在表示されているエリアの範囲を返します。 , BMap.LocalSearch は、Baidu Map API が提供するローカル検索コンストラクターで、localSearch.searchInBounds メソッドを使用してエリア内のキーワード検索を実行します。

最後に、検索結果のマークされた地点を地図上に表示するなど、検索結果のコールバック関数で検索結果を処理できます。以下に示すように、マーカーは

BMap.Marker コンストラクターを使用して作成し、map.addOverlay メソッドを介してマップに追加できます。 JS と Baidu Map API を使用して、地図エリア内の検索機能を実装するためのすべてのコードが完成しました。次に、カスタム スタイルの追加、マーカーをクリックして詳細情報を表示するなど、独自のニーズに応じてさらに最適化および拡張できます。

概要:

この記事では、JS と Baidu Map API を使用して地図エリア内に検索機能を実装する方法と、具体的なコード例を紹介します。 Baidu Map APIを利用すると、地図上のエリア内で簡単にキーワード検索を行い、検索結果を表示できます。この記事がお役に立てば幸いです。あなたの開発が成功することを祈っています。