1.申请百度地图ak; 2.完整代码如下:
<html> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <title>百度地图绘制多边形区域</title> </head> <body> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="你申请的ak值"></script> <script type="text/javascript"> let map; let pointArray = [ {lng:108.853025, lat:34.298633}, {lng:108.85475, lat:34.318075}, {lng:108.856475,lat:34.319744}, {lng:108.857049, lat:34.331431}, {lng:108.85245, lat:34.343354}, {lng:108.852881, lat:34.351223}, {lng:108.888095, lat:34.355872}, {lng:108.925896, lat:34.366123}, {lng:108.925896, lat:34.302808}, {lng:108.901749, lat:34.300422}, {lng:108.898012, lat:34.291714}, {lng:108.877603, lat:34.291833}, {lng:108.877603, lat:34.291834}, {lng:108.861793, lat:34.296605} ] function initialize() { // 百度地图API功能 map = new BMap.Map("map_canvas"); map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 // map.setMapType(BMAP_SATELLITE_MAP); var point = new BMap.Point(108.896, 34.330); // 创建点坐标 map.centerAndZoom(point,13); // 初始化地图,设置中心点坐标和地图级别。 var polygon1 = new BMap.Polygon(pointArray, {strokeColor:"green",fillColor:"#043233", strokeWeight:3, strokeOpacity:0,fillOpacity:0.4,strokeStyle:'dashed'}); map.addOverlay(polygon1); } </script> </head> <body onLoad="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"></div> </body> </html>