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.

In the above code, we use adivelement with the IDcontaineras 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); // 初始化地图，设置中心点坐标和缩放级别

In the above code, we first create a map instance using theBMap.Mapconstructor. Then, the center point coordinates of the map are set through theBMap.Pointconstructor. The coordinates here are the longitude and latitude of Beijing. Finally, use themap.centerAndZoommethod 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 theBMap.Markerconstructor 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));

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

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

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

In the above code, we add point markers to the map through themap.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 themarker.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)}));

In the above code, we create a label text instance through theBMap.Labelconstructor and pass it as a parameter tomarker.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:

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 replaceYour Baidu Map API Keyin 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!