How to use JS and Baidu Maps to add custom text annotations to the map

How to use JS and Baidu Map to implement the function of adding custom text annotations to the map

Map is a commonly used function in modern web development, and Baidu Map is a domestic One of the most popular map services, it provides rich interfaces and functions to meet the needs of developers. This article will introduce how to add custom text labels on the map by using JavaScript and Baidu Map API, and attach specific code examples.

1. Preparation
First, we need to introduce the JavaScript code of Baidu Map API into the HTML code so that we can subsequently use map-related functions. Add the following code in the

tag of HTML:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>

Among them, ak is the API key you applied for on the Baidu Map Open Platform, which is used to access the map service.

2. Create a map container
In the

tag of HTML, create a

element for displaying the map, and set its width and height. The sample code is as follows:

<div id="map" style="width: 1000px; height: 500px;"></div>

You can set the size of the map container according to actual needs.

3. Initialize the map
Next, we need to use JavaScript code to initialize the map and display the map on the previously created map container. The sample code is as follows:

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

In the above code, we created a map instance and set the coordinates of the center point of the map to the longitude and latitude of Beijing. Then, set the center point of the map to the specified coordinates through the centerAndZoom() method, and set the map level to 15, indicating that the map's zoom level is 15. Finally, the scroll wheel zoom function is enabled through the enableScrollWheelZoom() method.

4. Add custom text annotations
Next, we will implement the function of adding custom text annotations. First, we need to create a label object and set the position and content of the label. The code example is as follows:

var point = new BMap.Point(116.404, 39.915); // 创建文字标注的位置点
var label = new BMap.Label("自定义文字", {offset: new BMap.Size(20, -10)}); // 创建文字标注对象
label.setStyle({ // 设置文字标注样式
    color: "#333", // 文字颜色
    fontSize: "14px", // 文字大小
    height: "20px", // 文字高度
    lineHeight: "20px", // 文字行高
    fontFamily: "微软雅黑" // 文字字体
});
map.addOverlay(label); // 将文字标注添加到地图中
label.setPosition(point); // 设置文字标注的位置

In the above code, we first create a position point to specify the position where the text annotation should be displayed. Then, create a text label object through the new BMap.Label() method, set the label content to "custom text", and set the offset of the label so that the text can appear a little above the specified position. Next, the text label style is set through the setLabelStyle() method, including text color, size, height, line height and font. Finally, add the text label to the map through the map.addOverlay() method, and use the setPosition() method to set the position of the text label to the previously created location point.

5. Summary
Through the above steps, we successfully used JavaScript and Baidu Maps to implement the function of adding custom text annotations to the map. In actual development, you can flexibly use the rich functions provided by Baidu Map API according to your own needs to achieve more personalized map functions. Hope this article is helpful to you.

The above is an introduction and code example on how to use JS and Baidu Maps to implement the function of adding custom text annotations to the map. By applying this knowledge, you can add rich map functionality to your web pages and improve the user experience. I wish you success in your development!

The above is the detailed content of How to use JS and Baidu Maps to add custom text annotations to the map. For more information, please follow other related articles on the PHP Chinese website!