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

<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!