How to use JS and Amap to implement POI search function around the location

How to use JS and Amap to implement the POI search function around the location

With the development of the mobile Internet, map applications have become an indispensable part of mobile phone users. When developing map applications, it is often necessary to obtain nearby POI information to meet user needs. This article will introduce how to use JavaScript and Amap API to implement the POI search function around a location, and show some specific code examples.

First, we need to introduce the JavaScript file of the Amap Map API into the HTML file. This can be achieved by adding the following code to the head tag:

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

YourApiKey here needs to be replaced with the key of the Amap API you applied for. To apply for a key, please refer to the Amap developer documentation.

Next, we need to obtain the user's latitude and longitude information in the JavaScript code in order to search for nearby POIs. This can be obtained through the browser's Geolocation API. The following is a code example for obtaining the user's location coordinates:

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

The mapContainer in the above code is the id of a container element in the HTML file, used to display the map. A map is created and centered at the user's location, and a label is added to represent the user's location.

Then, we can search for POIs around the location based on the user's location and keywords. The following is a code example for searching and displaying nearby POIs:

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

The keywords in the above code are search keywords and can be changed according to actual needs. The searchNearBy method is used to perform POI search around the location. The parameters are keywords, user location coordinates, search radius and callback function. The result parameter in the callback function contains the search result information and can be processed according to requirements.

Finally, we need to add a container element for displaying the map in the HTML file. For example:

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

The width and height in the above code can be adjusted according to actual needs.

Through the above code, we can use JavaScript and Amap API to implement the POI search function around the location, and display the searched POI on the map. Readers can further expand and optimize the code according to their own needs to achieve richer functions.

The above is the detailed content of How to use JS and Amap to implement POI search function around the location. For more information, please follow other related articles on the PHP Chinese website!