首页帮我生成个使用百度地图js api的demo，demo中可以手动划区域，生成对应的polygon，生成的polygon的坐标点保存在一个名为polygon_list的数组中，这个数组可以供后面使用

帮我生成个使用百度地图js api的demo，demo中可以手动划区域，生成对应的polygon，生成的polygon的坐标点保存在一个名为polygon_list的数组中，这个数组可以供后面使用

时间: 2023-05-27 21:04:51 浏览: 156

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用百度地图API绘制多边形</title> <style type="text/css"> #allmap{ height: 500px; width: 100%; margin: 0px; padding: 0px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript"> var map = new BMap.Map("allmap"); map.centerAndZoom("北京",15); //初始化地图，设置中心点和缩放级别 map.enableScrollWheelZoom(); //启用滚轮放大缩小 //定义一个用以存储多边形区域的数组 var polygon_list = []; //单击地图事件，添加多边形 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); //通过点击地图，生成一个多边形的坐标点 if(polygon_list.length == 0){ polygon_list.push([e.point.lng, e.point.lat]); } else if(polygon_list[polygon_list.length - 1][0] != e.point.lng || polygon_list[polygon_list.length - 1][1] != e.point.lat){ polygon_list.push([e.point.lng, e.point.lat]); } var polygon = new BMap.Polygon(polygon_list, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5, fillColor:"yellow", fillOpacity:0.3}); //定义一个多边形 map.addOverlay(polygon); //添加多边形到地图上 }); //清空多边形区域的函数 function clear_polygon(){ for(var i=0;i<polygon_list.length;i++){ polygon_list.pop(); } map.clearOverlays(); //清除所有的覆盖物 } </script> </head> <body> <div id="allmap"></div> <button onclick="clear_polygon();">清空多边形</button> </body> </html>

阅读全文