JS と Baidu Maps を使用して地図オートコンプリート検索機能を実装する方法-jsチュートリアル-php.cn

JS と Baidu Maps を使用して地図オートコンプリート検索機能を実装する方法

WBOY

リリース： 2023-11-21 13:58:29

オリジナル

1261 人が閲覧しました

JS と Baidu Maps を使用して地図オートコンプリート検索機能を実装する方法

まず、地図オートコンプリート検索機能とは何かを理解する必要があります。は。地図のオートコンプリート検索は、ユーザーが入力ボックスにキーワードを入力すると、ユーザーが入力したキーワードに基づいて関連する検索結果が地図に自動的に表示される方法です。この機能は、場所の検索、ルート検索など、さまざまな地図アプリケーションで非常に一般的です。

JS と Baidu Maps を使用して地図のオートコンプリート検索機能を実装するには、いくつかの手順が必要です。以下に各ステップの詳細を示し、対応するコード例を示します。この記事では、読者が JS と HTML の基本的な知識をすでに持っていることを前提とします。

ステップ 1: Baidu Map API を導入する
まず、Baidu Map API を HTML ファイルに導入する必要があります。 Baidu Map Open Platform で API キーを申請し、コード内のキーを「yourAPIKey」に置き換えます。

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

ログイン後にコピー

ステップ 2: マップコンテナを作成する
マップをホストするコンテナを HTML ファイル内に作成します。便宜上、このコンテナには固定の幅と高さを与えます。

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

ログイン後にコピー

ステップ 3: マップを初期化する
JS で、Baidu Map の API を使用してマップを初期化します。マップのコンテナオブジェクトとマップのスタイルを指定する必要があります。

var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

ログイン後にコピー

ステップ 4: オートコンプリート検索ボックスを作成する
ユーザーがキーワードを入力するための入力ボックスを HTML ファイルに作成します。 JS で入力ボックスの値を取得するには、入力ボックスの ID を指定する必要があります。

<input type="text" id="keyword" />

ログイン後にコピー

ステップ 5: JS コードを作成する
JS で、マップの自動検索機能を実装するコードを作成します。このコードは、Baidu Map の API を呼び出して、ユーザーが入力したキーワードに基づいて関連する場所を取得し、地図上に表示します。

var keywordInput = document.getElementById("keyword");
var autoComplete = new BMap.Autocomplete({
    input: keywordInput,
    location: map
});

autoComplete.addEventListener("onconfirm", function (e) {
    var _value = e.item.value;
    var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

    var options = {
        onSearchComplete: function (results) {
            // 获取第一个搜索结果，并将地图移动到该位置
            var poi = results.getPoi(0);
            map.setCenter(poi.point);
        }
    };

    // 在地图上显示搜索结果
    var local = new BMap.LocalSearch(map, options);
    local.search(myValue);
});

ログイン後にコピー

上記は、JS と Baidu Maps を使用して地図のオートコンプリート検索機能を実装するコード例です。これらのコードをプロジェクトにコピーし、必要に応じて変更および最適化できます。この記事がお役に立てば幸いです。

以上がJS と Baidu Maps を使用して地図オートコンプリート検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。