So verwenden Sie JS und Amap, um die POI-Suchfunktion rund um den Standort zu implementieren

So verwenden Sie JS und Amap, um POI-Suchfunktionen rund um Standorte zu implementieren

Mit der Entwicklung des mobilen Internets sind Kartenanwendungen zu einem unverzichtbaren Bestandteil für Mobiltelefonbenutzer geworden. Bei der Entwicklung von Kartenanwendungen ist es häufig erforderlich, POI-Informationen in der Nähe zu erhalten, um den Benutzeranforderungen gerecht zu werden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript und der Amap-API die POI-Suchfunktion rund um einen Standort implementieren, und es werden einige spezifische Codebeispiele gezeigt.

Zuerst müssen wir die JavaScript-Datei der Amap Map API in die HTML-Datei einführen. Dies kann durch Hinzufügen des folgenden Codes zum Head-Tag erreicht werden:

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

YourApiKey muss hier durch den Schlüssel der Amap-API ersetzt werden, die Sie beantragt haben. Um einen Schlüssel zu beantragen, lesen Sie bitte die Amap-Entwicklerdokumentation.

Als nächstes müssen wir die Breiten- und Längengradinformationen des Benutzers im JavaScript-Code abrufen, um nach POIs in der Nähe zu suchen. Dies kann über die Geolocation-API des Browsers abgerufen werden. Das Folgende ist ein Codebeispiel zum Abrufen der Standortkoordinaten des Benutzers:

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

Der „mapContainer“ im obigen Code ist die ID eines Containerelements in der HTML-Datei, das zum Anzeigen der Karte verwendet wird. Eine Karte wird erstellt und am Standort des Benutzers zentriert, und eine Beschriftung wird hinzugefügt, um den Standort des Benutzers darzustellen.

Dann können wir eine POI-Suche rund um den Standort basierend auf dem Standort und den Schlüsselwörtern des Benutzers durchführen. Das Folgende ist ein Codebeispiel für die Suche und Anzeige von POIs in der Nähe:

// 根据用户位置和关键词进行地点搜索
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);
      });
    }
  });
});

Die Schlüsselwörter im obigen Code sind Suchschlüsselwörter und können je nach tatsächlichem Bedarf geändert werden. Die searchNearBy-Methode wird verwendet, um POI-Suchen rund um den Standort durchzuführen. Die Parameter sind Schlüsselwörter, Benutzerstandortkoordinaten, Suchradius und Rückruffunktion. Der Ergebnisparameter in der Callback-Funktion enthält die Suchergebnisinformationen und kann entsprechend den Anforderungen verarbeitet werden.

Schließlich müssen wir der HTML-Datei ein Containerelement hinzufügen, um die Karte anzuzeigen. Zum Beispiel:

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

Die Breite und Höhe im obigen Code können entsprechend den tatsächlichen Anforderungen angepasst werden.

Durch den obigen Code können wir JavaScript und die Amap-API verwenden, um die POI-Suchfunktion rund um den Standort zu implementieren und den gesuchten POI auf der Karte anzuzeigen. Leser können den Code entsprechend ihren eigenen Bedürfnissen weiter erweitern und optimieren, um umfangreichere Funktionen zu erreichen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS und Amap, um die POI-Suchfunktion rund um den Standort zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!