How to use JS and Baidu Maps to implement the map's popular attractions display function

How to use JS and Baidu Maps to implement the map’s popular attractions display function

With the rapid development of tourism, more and more people are keen to explore places around the world popular destination. As a website or app developer, you may need to display information about popular attractions on a map so that users can more easily understand and plan their trips. In this article, I will introduce how to use JavaScript and Baidu Map API to implement this function, and provide specific code examples.

First, we need to obtain the map instance through Baidu Map API. Add a div element to the HTML file that displays the map:

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

Next, we use JavaScript code to initialize the map and set the center point and zoom level:

var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 设置中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点和缩放级别

Now, let’s get started Show popular attractions on the map. We assume that we already have a dataset containing information about popular attractions. Each attraction has a latitude and longitude coordinate and other related information. We can store this information in an array:

var hotSpots = [
  {
    name: "故宫",
    lng: 116.403875,
    lat: 39.915280
  },
  {
    name: "长城",
    lng: 116.570425,
    lat: 40.431908
  },
  {
    name: "颐和园",
    lng: 116.274919,
    lat: 39.998062
  }
  // 其他景点信息
];

Next, we need to traverse the array of popular attractions and add marker points and information windows to the map. You can use the Marker and InfoWindow classes provided by Baidu Maps to complete these operations. The following is the specific implementation code:

for (var i = 0; i < hotSpots.length; i++) {
  var spot = hotSpots[i];
  var point = new BMap.Point(spot.lng, spot.lat); // 创建点坐标
  var marker = new BMap.Marker(point); // 创建标记点
  var infoWindow = new BMap.InfoWindow(spot.name); // 创建信息窗口
  marker.addEventListener("click", function () {
    this.openInfoWindow(infoWindow); // 点击标记点时打开对应的信息窗口
  });
  map.addOverlay(marker); // 添加标记点到地图
}

In the above code, we traverse the array of popular attractions and create a marker point and information window for each attraction. We then add the marker to the map and open the corresponding information window when the user clicks on the marker.

The above is the sample code that uses JavaScript and Baidu Map API to implement the map's popular attractions display function. According to actual needs, you can customize the attraction information in the popular attraction array, as well as the style and content of marker points and information windows. I hope this article is helpful to you, and I wish you successful development!

The above is the detailed content of How to use JS and Baidu Maps to implement the map's popular attractions display function. For more information, please follow other related articles on the PHP Chinese website!