首页使用bmap，通过地图json绘制区域，给我个demo

使用bmap，通过地图json绘制区域，给我个demo

时间: 2023-06-14 15:04:01 浏览: 83

以下是一个简单的使用 BMap 绘制区域的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BMap 绘制区域示例</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: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script type="text/javascript"> // 初始化地图 var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定义绘制区域的样式 var polygonStyle = { strokeColor: "#000", strokeWeight: 2, strokeOpacity: 0.8, fillColor: "#fff", fillOpacity: 0.4 }; // 绘制区域 var polygonPoints = [ new BMap.Point(116.404, 39.915), new BMap.Point(116.404, 39.925), new BMap.Point(116.414, 39.925), new BMap.Point(116.414, 39.915) ]; var polygon = new BMap.Polygon(polygonPoints, polygonStyle); map.addOverlay(polygon); </script> </body> </html> ``` 注意，上述代码中的密钥需要替换成你自己的百度地图密钥。此外，绘制区域的坐标点需要根据实际情况进行调整。

阅读全文