如何使用JS和百度地圖實現地圖搜尋功能

如何使用JS和百度地圖實現地圖搜尋功能

地圖搜尋功能是現今許多網站和應用程式中常見的一個功能，可以幫助用戶查找到特定地點的位置和相關資訊。本文將介紹如何使用JS和百度地圖API來實現此功能，並提供具體的程式碼範例。

首先，我們需要在網頁中引入百度地圖的JS庫，可以透過以下方式載入：

<script src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>

這裡的your_api_key是你在百度地圖開放平台上申請的API金鑰。如果你還沒有申請，可以前往百度地圖開放平台的網站註冊並創建一個新的應用，然後取得API金鑰。

在引入百度地圖庫之後，我們需要在網頁中建立一個地圖容器，用於顯示地圖。可以在HTML檔案中新增一個<div>元素來建立地圖容器，同時為其指定一個唯一的ID，例如<code>mapContainer：

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

接下來，我們可以使用JS程式碼來初始化地圖，並設定一些基本的地圖屬性：

var map = new BMap.Map("mapContainer"); // 创建地图实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 设置地图中心点和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放功能

在地圖初始化完成後，我們可以新增一個搜尋框和一個搜尋按鈕，讓使用者輸入關鍵字並觸發搜尋操作。可以在HTML檔案中加入以下程式碼：

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

然後，在JS程式碼中定義一個search函數，用來處理搜尋操作。在這個函數中，我們首先需要取得使用者輸入的關鍵字，然後使用百度地圖API的LocalSearch類別來進行地圖搜尋：

function search() {
  var keyword = document.getElementById("keyword").value;
  
  var localSearch = new BMap.LocalSearch(map, {
    renderOptions: { map: map },
    onSearchComplete: function(results) {
      if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
        // 搜索成功，处理搜索结果
        for (var i = 0; i < results.getCurrentNumPois(); i++) {
          var poi = results.getPoi(i);
          console.log(poi.title, poi.address, poi.point); // 打印搜索结果的标题、地址和位置信息
        }
      } else {
        // 搜索失败，处理错误信息
        console.log(localSearch.getStatus(), localSearch.getResults());
      }
    }
  });
  
  localSearch.search(keyword);
}

在這段程式碼中，我們首先透過document.getElementById方法取得搜尋框的輸入值，並儲存到變數keyword。然後建立一個LocalSearch實例，將地圖和搜尋結果的渲染選項作為參數傳入，同時定義一個onSearchComplete回調函數來處理搜尋結果。

在onSearchComplete回呼函數中，我們先透過localSearch.getStatus()方法來判斷搜尋是否成功，如果成功，我們可以透過results.getCurrentNumPois ()方法獲取到搜尋結果的數量，並遍歷這些結果，使用results.getPoi(i)方法獲取每個結果的詳細信息，例如標題、地址和位置等。最後，我們使用console.log方法列印這些資訊到控制台。

如果搜尋失敗，我們可以透過localSearch.getStatus()方法來取得錯誤狀態碼，並透過localSearch.getResults()方法來取得錯誤訊息。

最後，當使用者點選搜尋按鈕時，就會觸發search函數，進行地圖搜尋操作。搜尋結果將會在控制台中列印出來，並在地圖上顯示出來。

綜上所述，我們藉助JS和百度地圖的API，可以輕鬆實現地圖搜尋功能。透過搜尋框和搜尋按鈕，使用者可以輸入關鍵字，然後利用百度地圖的LocalSearch類別進行地圖搜索，並將結果顯示在地圖上。根據這個基本的實現，你可以進一步自訂搜尋結果的展示和互動方式，以滿足你的具體需求。

注意：以上範例程式碼僅為演示用途，實際使用時，需要根據具體的項目和需求進行適當修改和調整。