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

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

In modern web development, map applications have become one of the common functions. Drawing polygons on the map can help us mark specific areas for users to view and analyze. This article will introduce how to use JS and Baidu Map API to implement map polygon drawing function, and provide specific code examples.

First, we need to introduce Baidu Map API. You can use the following code to import the Baidu Map API JavaScript library in an HTML file:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=your_baidu_map_api_key"></script>

where your_baidu_map_api_key is the map API key you applied for on the Baidu Open Platform. Make sure you have requested the key and replaced it in the code.

Next, we need to add a container for displaying the map in the HTML. You can create a div element using the following code:

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

Then, write the code to draw the polygon in the JavaScript file. First, we need to initialize the map and set the map's center point and zoom level. The following code can be used to complete the initialization:

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

Next, we can draw polygons by clicking points on the map with the mouse. This can be achieved using the following code:

var polygonPoints = []; // 存储多边形的顶点坐标

var drawingManager = new BMapLib.DrawingManager(map, {
  isOpen: false, // 是否开启绘制模式
  drawingType: BMAP_DRAWING_POLYGON, // 绘制模式为多边形
  enableDrawingTool: true, // 是否显示工具栏
  enableCalculate: true // 绘制结束后是否计算面积
});

drawingManager.addEventListener("overlaycomplete", function(e) {
  var polygon = e.overlay;
  var path = polygon.getPath();
  
  for (var i = 0; i < path.length; i++) {
    var point = path[i];
    var lng = point.lng;
    var lat = point.lat;
    
    polygonPoints.push(new BMap.Point(lng, lat));
  }
  
  console.log(polygonPoints); // 输出多边形的顶点坐标
});

In the above code, we created a DrawingManager object and set the drawing mode to polygon. By listening to the overlaycomplete event, when the drawing is completed, the vertex coordinates of the polygon are added to the polygonPoints array and printed to the console.

Finally, we can display the drawn polygons on the map. This can be achieved using the following code:

var polygon = new BMap.Polygon(polygonPoints, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 创建多边形对象
map.addOverlay(polygon); // 添加多边形到地图上

In the above code, we created a Polygon object and set the polygon style. Add polygons to the map for display through the map.addOverlay method.

To sum up, by using JS and Baidu Map API, we can easily implement the map polygon drawing function. Through the above code examples, you can try it out and I believe you can easily implement this function. Hope this article is helpful to you!

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