首页用百度地图的js api，输出一个可以在页面手动画多边形的demo，输出的多边形的点以polygon_list的变量保存在js内，待后续使用

用百度地图的js api，输出一个可以在页面手动画多边形的demo，输出的多边形的点以polygon_list的变量保存在js内，待后续使用

时间: 2023-05-25 19:07:06 浏览: 182

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手动画多边形</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <style type="text/css"> #map { width: 100%; height: 500px; } #btn { margin: 20px 0; } </style> </head> <body> <div id="map"></div> <button id="btn">完成绘制</button> <script type="text/javascript"> var map = new BMap.Map("map"); // 创建地图实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图，设置中心点坐标和地图级别 var polygon_list = []; // 初始化多边形点列表 var polygon = new BMap.Polygon([], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 初始化多边形 map.addOverlay(polygon); // 添加多边形到地图上 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, // 是否开启绘制模式 enableDrawingTool: false, // 是否显示工具栏 polygonOptions: { // 配置多边形参数 strokeColor: "blue", // 线颜色 fillColor: "#fff", // 填充色 strokeWeight: 2, // 线宽 strokeOpacity: 0.5, // 线透明度 fillOpacity: 0.1 // 填充透明度 } }); drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON); // 设置绘制模式为多边形 drawingManager.addEventListener("polygoncomplete", function(e){ polygon_list = e.getPath(); // 将多边形点列表保存到变量中 }); document.getElementById("btn").onclick = function(){ drawingManager.close(); // 关闭绘制模式 alert("多边形点列表为：" + polygon_list); // 弹出保存的多边形点列表 } </script> </body> </html>

阅读全文