How to use JS and Amap to implement the recommendation function of popular attractions in locations

How to use JS and Amap to implement the popular attraction recommendation function requires specific code examples

1. Introduction
With the development of tourism, more and more More and more people like to travel independently and hope to find popular local attractions to better plan their travels. This article will use JavaScript and Amap API to implement a popular attraction recommendation function.

2. Implementation process

1. Register a developer account
   First, we need to register a developer account on the Amap open platform. After successful registration, you can obtain an API Key, which is a required parameter for calling the Amap API.

2. Introducing the Amap API
   Introducing the Amap API into the HTML document can be achieved through the following code:

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

   Replace YOUR_API_KEY with your own API Key.

3. Create a map container
   Create a DOM element in the HTML document as a map container:

   <div id="map" style="width: 600px; height: 400px;"></div>

   Here the width and height of the container are set.

4. Initialize the map
   Initialize the map in JavaScript code, specify the center point of the map, the zoom level and the ID of the map container:

   var map = new AMap.Map('map', {
     center: [116.397428, 39.90923],
     zoom: 13
   });

   The latitude and longitude coordinates here are The coordinates of Beijing.

5. Add positioning control
   In order to facilitate positioning, you can add a positioning control on the map:

   AMap.plugin('AMap.Geolocation', function() {
     var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000
     });
   
     map.addControl(geolocation);
   
     geolocation.getCurrentPosition(function(status, result) {
    if (status === 'complete') {
      // 定位成功，更新地图中心点
      map.setCenter(result.position);
    }
     });
   });

   Create a Geolocation instance by calling the AMap.Geolocation class and Add to map. Then call the getCurrentPosition method to obtain the latitude and longitude of the current location, and set the map center point as the current location.

6. Add popular attraction markers
   Next, we need to get the data of popular attractions and add markers on the map. Usually, this data can be obtained through the backend API. A simulated attraction data is used here:

   var hotSpots = [
     {
    name: '故宫',
    location: [116.397428, 39.90923]
     },
     {
    name: '天安门广场',
    location: [116.397978, 39.903258]
     },
     {
    name: '颐和园',
    location: [116.272328, 39.991455]
     }
   ];

   Use a for loop to traverse the data, then create markers and add them to the map:

   for (var i = 0; i < hotSpots.length; i++) {
     var marker = new AMap.Marker({
    position: hotSpots[i].location,
    title: hotSpots[i].name
     });
   
     map.add(marker);
   }

7. Add click event
   In order to allow users to display detailed information about attractions when they click on the mark, we can add a click event to each mark to display a pop-up window when clicked:

   AMap.event.addListener(marker, 'click', function() {
     var infoWindow = new AMap.InfoWindow({
    content: '<h3>' + marker.getTitle() + '</h3>'
     });
   
     infoWindow.open(map, marker.getPosition());
   });

   Here we use the AMap.event.addListener method for the mark A click event is added. When the user clicks on the marker, an InfoWindow instance is created and displayed on the map through the open method.

8. Final effect
   Through the above steps, we have successfully implemented the function of recommending popular attractions in locations. Markers of popular attractions are added to the map, and detailed information about the attractions is displayed by clicking on the markers.

3. Summary
This article uses JavaScript and Amap API to implement the recommendation function of popular attractions in a few simple steps. In actual projects, we can call other functions of the Amap API according to specific needs to achieve more map interaction and data display effects. I hope this article can be of some help to beginners.

The above is the detailed content of How to use JS and Amap to implement the recommendation function of popular attractions in locations. For more information, please follow other related articles on the PHP Chinese website!