How to use JS and Baidu Maps to implement multi-point marking function on the map-JS Tutorial-php.cn

How to use JS and Baidu Maps to implement multi-point marking function on the map

WBOY

Release： 2023-11-21 15:10:59

Original

1401 people have browsed it

How to use JS and Baidu Maps to implement multi-point marking function on the map

How to use JS and Baidu Maps to implement the map multi-point marking function

In web development, it is often necessary to use the map function to display location information. As one of the most widely used map APIs in China, Baidu Maps has rich functions and is easy to use. This article will introduce how to use JavaScript and Baidu Map API to implement the map multi-point marking function, and give specific code examples.

First, we need to introduce Baidu Map’s JS library and related CSS files into the HTML file.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地图多点标记</title>
  <style type="text/css">
    #container {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</body>
</html>

Copy after login

In the above code, we use a div element with the ID container as the container of the map, and introduce the Baidu Map API.

Next, in the JavaScript file, we need to create the map through the Baidu Map API and set the center point and zoom level of the map.

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

Copy after login

In the above code, we first create a map instance using the BMap.Map constructor. Then, the center point coordinates of the map are set through the BMap.Point constructor. The coordinates here are the longitude and latitude of Beijing. Finally, use the map.centerAndZoom method to initialize the map and set the center point coordinates and zoom level.

Next, we need to add multiple point markers on the map. We can use the BMap.Marker constructor to create a point marker instance and specify the location of the point marker.

var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915));  // 创建点标记实例，并指定位置
var marker2 = new BMap.Marker(new BMap.Point(116.316, 39.910));
var marker3 = new BMap.Marker(new BMap.Point(116.417, 39.909));

Copy after login

In the above code, we created three point markers, located at different locations in Beijing.

Next, we add point markers to the map through the map.addOverlay() method.

map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);

Copy after login

In the above code, we add point markers to the map through the map.addOverlay() method. The three point markers we added will now appear on the map.

Finally, we can add label text to the point marker through the marker.setLabel() method.

marker1.setLabel(new BMap.Label("标记1", {offset: new BMap.Size(20,-10)}));
marker2.setLabel(new BMap.Label("标记2", {offset: new BMap.Size(20,-10)}));
marker3.setLabel(new BMap.Label("标记3", {offset: new BMap.Size(20,-10)}));

Copy after login

In the above code, we create a label text instance through the BMap.Label constructor and pass it as a parameter to marker.setLabel() method. In this way, the corresponding label text will be displayed on each point mark.

So far, we have completed the implementation of the map multi-point marking function. The complete code example is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地图多点标记</title>
  <style type="text/css">
    #container {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
  <script>
    var map = new BMap.Map("container");  // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);  // 设置地图中心点坐标
    map.centerAndZoom(point, 15);  // 初始化地图，设置中心点坐标和缩放级别

    var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915));  // 创建点标记实例，并指定位置
    var marker2 = new BMap.Marker(new BMap.Point(116.316, 39.910));
    var marker3 = new BMap.Marker(new BMap.Point(116.417, 39.909));

    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);

    marker1.setLabel(new BMap.Label("标记1", {offset: new BMap.Size(20,-10)}));
    marker2.setLabel(new BMap.Label("标记2", {offset: new BMap.Size(20,-10)}));
    marker3.setLabel(new BMap.Label("标记3", {offset: new BMap.Size(20,-10)}));
  </script>
</body>
</html>

Copy after login

Through the above code, we can implement the map multi-point marking function in the HTML page. According to actual needs, we can customize the location and label text of the markers to achieve a richer map display effect.

It should be noted that when using Baidu Map API, you need to replace Your Baidu Map API Key in the code with the API key you applied for on the Baidu Map Open Platform.

The above is the detailed content of How to use JS and Baidu Maps to implement multi-point marking function on the map. For more information, please follow other related articles on the PHP Chinese website!