Home >Web Front-end >JS Tutorial >How to use JS and Baidu Map to implement the map information window function

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

PHPzOriginal: 2023-11-21 17:33:471293browse

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>

In the above code, we pass the <script></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);

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());
});

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());

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!

css html 回调函数 map JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS and Baidu Maps to implement map drag event processing functionNext article：How to use JS and Baidu Maps to implement map drag event processing function

See more

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

Related articles