JSとAmapを使って現在地周辺のPOI検索機能を実装する方法

JS と Amap を使用して現在地周辺の POI 検索機能を実装する方法

モバイル インターネットの発展に伴い、地図アプリケーションはモバイル デバイスに不可欠な要素になりました。電話ユーザー。地図アプリケーションを開発する場合、ユーザーのニーズに合わせて近くの POI 情報を取得する必要があることがよくあります。この記事では、JavaScript と Amap API を使用して場所周辺の POI 検索機能を実装する方法を紹介し、いくつかの具体的なコード例を示します。

まず、Amap Map API の JavaScript ファイルを HTML ファイルに導入する必要があります。これは、次のコードを head タグに追加することで実現できます。

<script src="https://webapi.amap.com/maps?v=1.4.15&key=yourApiKey"></script>

YourApiKey ここでは、申請した Amap API のキーに置き換える必要があります。キーを申請するには、Amap 開発者ドキュメントを参照してください。

次に、近くの POI を検索するために、JavaScript コードでユーザーの緯度と経度の情報を取得する必要があります。これは、ブラウザの Geolocation API を通じて取得できます。以下は、ユーザーの位置座標を取得するコード例です。

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  // 以下是高德地图API的代码，用于创建地图和标注用户位置
  var map = new AMap.Map('mapContainer', {
    center: [longitude, latitude],
    zoom: 13
  });
  
  var marker = new AMap.Marker({
    position: [longitude, latitude]
  });

  map.add(marker);
});

上記のコードの mapContainer は、地図を表示するために使用される HTML ファイル内のコンテナー要素の ID です。ユーザーの位置を中心とする地図が作成され、ユーザーの位置を表すラベルが追加されます。

次に、ユーザーの場所とキーワードに基づいて、その場所の周囲の POI を検索できます。以下は、近くの POI を検索して表示するコード例です。

// 根据用户位置和关键词进行地点搜索
var keyword = '餐厅';
AMap.service('AMap.PlaceSearch').then(function() {
  var placeSearch = new AMap.PlaceSearch({
    pageSize: 10,
    pageIndex: 1,
    citylimit: true,
    map: map
  });

  placeSearch.searchNearBy(keyword, [longitude, latitude], 1000, function(status, result) {
    if (status === 'complete') {
      var pois = result.poiList.pois;
      
      // 遍历搜索结果，展示POI标注
      pois.forEach(function(poi) {
        var poiMarker = new AMap.Marker({
          position: [poi.location.lng, poi.location.lat]
        });

        map.add(poiMarker);
      });
    }
  });
});

上記のコード内のキーワードは検索キーワードであり、実際のニーズに応じて変更できます。 searchNearBy メソッドは、位置周辺の POI 検索を実行するために使用され、パラメータはキーワード、ユーザーの位置座標、検索範囲、コールバック関数です。コールバック関数の result パラメータには検索結果情報が含まれており、要件に応じて処理できます。

最後に、HTML ファイルに地図を表示するためのコンテナ要素を追加する必要があります。例:

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

上記のコードの幅と高さは、実際のニーズに応じて調整できます。

上記のコードにより、JavaScript と Amap API を使用して、場所周辺の POI 検索機能を実装し、検索された POI を地図上に表示できます。読者は、独自のニーズに応じてコードをさらに拡張および最適化し、より豊富な機能を実現できます。

以上がJSとAmapを使って現在地周辺のPOI検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。