Baidu Maps が提供するサービス - ローカル検索、範囲検索_html/css_WEB-ITnose

地図サービスの概要

地図サービスとは、ローカル検索やルート計画などのデータ情報を提供するインターフェースを指します。 Baidu Map API が提供するサービスは次のとおりです。

LocalSearch: ローカル検索 は、北京の「公園」の検索など、特定のエリアでの位置検索サービスを提供します。

TransitRoute: 乗換案内。特定のエリアでのバス旅行プランの検索サービスを提供します。

DrivingRoute: 運転ガイドルート、運転旅行計画のための検索サービスを提供します。

WalkingRoute: ウォーキングナビゲーション、徒歩旅行プランの検索サービスを提供します。

ジオコーダー: 住所解決。住所情報を座標点情報に変換するサービスを提供します。

LocalCity: LocalCity、あなたの都市を自動的に決定するサービスを提供します。

TrafficControl: リアルタイム交通制御、リアルタイムおよび過去の交通情報サービスを提供します。

クラス のサービス インターフェースを検索するには、 検索範囲 を 指定する必要があります。そうしないと、インターフェースは機能しません。 ローカル検索

BMap.LocalSearch

はローカル検索サービスを提供します。ローカル検索を使用する場合、その検索エリアを設定する必要があります。検索エリアは、BMap.Map オブジェクト、BMap.Point オブジェクト、または省名または都市名 (例: "Beijing City") 文字列。 BMap.LocalSearch コンストラクターのオプションの 2 番目のパラメーターでは、結果の表示を指定できます。 BMap.RenderOptions クラスは、レンダリングを制御するいくつかのプロパティを提供します。map は結果が表示されるマップ インスタンスを指定し、panel は結果リストのコンテナ要素を指定します。

var map = new BMap.Map("container");      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      var local = new BMap.LocalSearch(map, {            renderOptions:{map: map}      });      local.search("天安门");

さらに、BMap.LocalSearch は、周囲の検索サービスと範囲検索サービスを提供する

searchNearby

メソッドと

searchInBounds

メソッドも提供します。 検索の構成

BMap.LocalSearch には、ニーズに合わせて検索サービスの動作をカスタマイズできるいくつかの構成方法が用意されています。 以下の例では、最初の結果の情報ウィンドウを表示せずに、ページごとに 8 つの結果を表示するように調整し、結果ポイントの位置に応じてマップの視野を自動的に調整します。パネル

設定を通じて BMap.LocalSearchOptions.renderOptions.panel プロパティは、ローカル検索オブジェクトの結果リスト コンテナーを提供でき、検索結果はコンテナー要素に自動的に追加されます。次の例を参照してください:

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  var local = new BMap.LocalSearch("北京市",               {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      local.search("中关村");

データインターフェース

検索結果はマップとリストに自動的に追加されるだけでなく、データインターフェースを通じて詳細なデータ情報を取得することもできます。 、マップ API と組み合わせると、ラベルや情報ウィンドウを自分でマップに追加できます。 BMap.LocalSearch クラスと BMap.LocalSearchOptions クラスは、検索結果のデータ情報を取得できるコールバック関数を設定するためのいくつかのインターフェイスを提供します。 たとえば、BMap.LocalResult オブジェクト インスタンスは、各検索結果のデータ情報を含む onSearchComplete コールバック関数パラメータを通じて取得できます。 コールバック関数が実行されると、BMap.LocalSearch.getStatus() メソッドを使用して、検索が成功したかどうかを確認したり、エラーの詳細を取得したりできます。

次の例では、最初のページの各結果のタイトルとアドレス情報が onSearchComplete コールバック関数によって取得され、ページに出力されます。検索サービス では、場所の近くまたは特定の結果ポイントの周囲を検索できます。 次の例は、玄関近くのスナックを検索する方法を示しています:

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, {renderOptions: {map: map,panel: "results"}); local.search("中关村");

長方形範囲検索

長方形範囲検索は、指定した視野に基づいて検索結果を提供します。注: 検索範囲が大きすぎる場合、結果が表示されない場合があります。

次の例は、現在のマップの視野内で銀行を検索する方法を示しています。

var map = new BMap.Map("container");          map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      var options = {            onSearchComplete: function(results){                if (local.getStatus() == BMAP_STATUS_SUCCESS){                      // 判断状态是否正确                      var s = [];                      for (var i = 0; i < results.getCurrentNumPois(); i ++){                          s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);                      }                   document.getElementById("log").innerHTML = s.join("<br>");                }            }       };      var local = new BMap.LocalSearch(map, options);      local.search("公园");

長方形領域の検索例

var map = new BMap.Map("container");         map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      var local = new BMap.LocalSearch(map,                 { renderOptions:{map: map, autoViewport: true}});      local.searchNearby("小吃", "前门");

レンダリング:

ありがとう辛抱強く読んでください！