Home > Article > Web Front-end > How to use JS and Baidu Maps to implement map drawing function

How to use JS and Baidu Maps to implement map drawing function

WBOYOriginal: 2023-11-21 18:25:10949browse

How to use JS and Baidu Maps to implement the map drawing function, specific code examples are required

The map drawing function is a common requirement and can be used to mark and display specific Location information, such as marking properties, stores, etc. In this article, we will introduce how to use JavaScript and Baidu Map API to implement map drawing functions, and provide specific code examples.

First, we need to introduce Baidu Map’s JavaScript API into the HTML file and create a map container. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图绘制示例</title>
    <!-- 引入百度地图的JavaScript API -->
    <script src="http://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
    <style>
        #mapContainer {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <!-- 创建地图容器 -->
    <div id="mapContainer"></div>

    <script>
        // 在这里写入地图绘制的代码
    </script>
</body>
</html>

In the above code, we introduced the JavaScript API of Baidu Maps through the <script></script> tag and created a <div>Element, used to hold the map. Note that you need to replace <code>YOUR_AK with the Baidu Map API key you applied for.

Next, in the JavaScript part, we first need to initialize the map, the code is as follows:

// 初始化地图
var map = new BMap.Map("mapContainer");
// 设置地图中心点和缩放级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

In the above code, we pass new BMap.Map("mapContainer")Create a map instance and set the center point and zoom level of the map through new BMap.Point(116.404, 39.915).

Next, we can start to implement the map drawing function. Baidu Maps provides a variety of drawing tools, such as markers, polylines, polygons, etc. Here we take markers as an example to illustrate. First, we need to create a marker object and display it on the map. The code is as follows:

// 创建标记对象
var marker = new BMap.Marker(point);
// 将标记添加到地图
map.addOverlay(marker);

In the above code, we create a marker object through new BMap.Marker(point) Marker object, then add the marker to the map via map.addOverlay(marker).

In addition to displaying markers, we can also monitor the click event of the map to implement the function of adding markers when clicking on the map. The code is as follows:

// 监听地图的点击事件
map.addEventListener("click", function(e) {
    var point = new BMap.Point(e.point.lng, e.point.lat);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
});

In the above code, we listen to the click event of the map through the map.addEventListener method. When the map is clicked, the callback function will be triggered. In the callback function, we obtain the clicked position through new BMap.Point(e.point.lng, e.point.lat), create a marker object, and finally add the marker to the map.

Through the above code example, we have implemented the function of map drawing using JavaScript and Baidu Map API. In addition to markers, Baidu Map API also provides other drawing tools, such as polylines, polygons, etc., which you can extend and apply according to your needs. Hope this article is helpful to you!

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

JavaScript 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 add custom text annotations to the mapNext article：How to use JS and Baidu Maps to add custom text annotations to the map

See more

How to use JS and Baidu Maps to implement map drawing function

Related articles