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

How to use JS and Amap to implement location search function

Introduction:
In today's digital society, many applications need to use maps to provide Positioning and navigation functions. Amap is one of the most well-known and powerful map service providers in China. This article will introduce how to use JS and Amap API to implement the location search function, and provide specific code examples.

1. Preparation

1. Obtain an Amap developer account
   Before starting, you need to register an Amap developer account and obtain a developer key ( key). Through this key, we can use the API functions of Amap.

2. Introduce the Amap API
   Introduce the JS library file of Amap into the page, the code is as follows:

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

   Among them, yourKey is you developer key.

2. Implement the search function around the location
Next, we will use JS and Amap API to implement the search function around the location.

1. Create a map instance
   First, create a container in the page to display the map. The code is as follows:

   <div id="map"></div>

   Then, create a map instance in the JS code, the code is as follows:

   var map = new AMap.Map('map', {
    zoom: 14, // 设置地图缩放级别
    center: [116.397428, 39.90923] // 设置地图中心点坐标
   });

   In the above code, we set the zoom level of the map to 14, and set the map's The coordinates of the center point are [116.397428, 39.90923] (the coordinates of Beijing City).

2. Add location mark
   Before implementing the search function around the location, we need to add a mark on the map to represent the current location. The code is as follows:

   var marker = new AMap.Marker({
    position: [116.397428, 39.90923], // 设置标记的位置坐标
    map: map // 将标记添加到地图上
   });

   In the above code, we set the marker's position coordinates to [116.397428, 39.90923] and added the marker to the previously created map instance.

3. Realize search around the location
   Next, we will use the POI search function of Amap to implement search around the location. The code is as follows:

   // 创建一个POI搜索对象
   var placeSearch = new AMap.PlaceSearch({
    pageSize: 10, // 每页显示的结果数量
    pageIndex: 1, // 当前页码
    city: '北京', // 设置搜索的城市
    citylimit: true // 限制搜索结果范围在当前城市
   });
   
   // 执行搜索
   placeSearch.searchNearBy('餐馆', [116.397428, 39.90923], 1000, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        // 处理搜索结果
        var pois = result.poiList.pois;
        for (var i = 0; i < pois.length; i++) {
            var poi = pois[i];
            console.log(poi.name);
            console.log(poi.address);
        }
    } else {
        console.log('搜索失败');
    }
   });

   In the above code, we create a POI search object and set the number of results displayed on each page, the current page number, the city searched, and the result range is limited to the current city. Then, we call the searchNearBy method to perform the search, where the parameter 'restaurant' represents the search keyword, [116.397428, 39.90923] represents the center coordinate of the search, 1000 indicates the search radius range (unit is meters).

When the search is completed, the search results are processed through the callback function. We can obtain the name and address information of each location from the results and process it further.

Conclusion:
By using JS and Amap API, we can easily implement the search function around the location. In practical applications, parameters such as search keywords, search center coordinates, and search range can be adjusted according to needs to meet specific business needs. I hope this article can help you understand how to use JS and Amap API to implement the search function around the location.

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