首页高德地图围绕中心的画圈，给一个demo

高德地图围绕中心的画圈，给一个demo

时间: 2024-02-11 22:05:43 浏览: 93

好的，以下是一个简单的demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图画圆Demo</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <style type="text/css"> html,body,#container{ height: 100%; margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923], // 地图中心点 zoom: 13 // 地图缩放级别 }); var circle = new AMap.Circle({ center: [116.397428, 39.90923], // 圆心位置 radius: 1000, // 半径 strokeColor: "#F33", // 线颜色 strokeOpacity: 1, // 线透明度 strokeWeight: 3, // 线粗细度 fillColor: "#ee2200", // 填充颜色 fillOpacity: 0.35 // 填充透明度 }); circle.setMap(map); </script> </body> </html> ``` 在这个demo中，我们使用了高德地图的JavaScript API实现了一个简单的围绕地图中心的圆形。其中，`AMap.Map`用于创建地图实例，`AMap.Circle`用于创建圆形实例。在`AMap.Circle`中，我们设置了圆心位置、半径、线颜色、线透明度、线粗细度、填充颜色和填充透明度等参数。最后，使用`circle.setMap(map)`将圆形添加到地图中。

阅读全文