How to use JS and Baidu Map to implement the map information window function-JS Tutorial-php.cn

How to use JS and Baidu Map to implement the map information window function

PHPz

Release： 2023-11-21 17:33:47

Original

1283 people have browsed it

How to use JS and Baidu Map to implement the map information window function

The map information window is a pop-up window that displays detailed information on the map and can be used to display the name of a place , address, contact number and other information. In this article, we will introduce how to use JS and Baidu Map API to implement the map information window function, and give specific code examples.

First, we need to introduce the JS file of Baidu Map into the HTML file. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图信息窗口示例</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
    <style>
        #mapContainer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
</body>
</html>

Copy after login

In the above code, we pass the <script> tag The JS file of Baidu Map is introduced, and the width and height are set for the map container using CSS styles.

Next, we write code in the JS file to implement the map information window function. First, we need to create a map instance and set the center point and zoom level of the map. The code is as follows:

// 创建地图实例
var map = new BMap.Map("mapContainer");
// 设置地图中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);

Copy after login

Next, we can add markers on the map and set click events for each marker. The code is as follows:

// 创建标记
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
// 将标记添加到地图上
map.addOverlay(marker);
// 设置标记的点击事件
marker.addEventListener("click", function() {
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这是一个标记的信息窗口");
    // 打开信息窗口
    map.openInfoWindow(infoWindow, marker.getPosition());
});

Copy after login

In the above code, we create a marker and add a callback function for the marker's click event. In the callback function, we create an information window and set the content displayed in the window. Finally, we add the information window to the map, open the information window through the map.openInfoWindow() method and set the position of the window to the marked position.

To display more detailed information, we can add more HTML elements to the information window. The code example is as follows:

// 创建信息窗口
var infoWindow = new BMap.InfoWindow("<div>" +
    "<h3>地点名称</h3>" +
    "<p>地址：XXX</p>" +
    "<p>联系电话：XXX</p>" +
    "</div>");
// 打开信息窗口
map.openInfoWindow(infoWindow, marker.getPosition());

Copy after login

In the above code, we added Information such as title, address and contact number.

The above is a specific code example using JS and Baidu Map API to implement the map information window function. You can customize what is displayed in the information window according to your needs and add more events and functions to the markers. I hope this article can help you implement the map information window function.

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