vue怎么用百度地图画圈
时间: 2023-07-05 12:03:41 浏览: 98
你可以使用百度地图 JavaScript API 来实现在地图上画圆操作。具体步骤如下:
1. 引入百度地图 JavaScript API:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
```
其中,`你的AK` 需要替换为你在百度开发者平台申请的应用的 API Key。
2. 初始化地图:
```javascript
// 创建地图实例
var map = new BMap.Map("map-container");
// 初始化地图,设置中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
```
3. 添加圆形覆盖物:
```javascript
// 定义圆心坐标和半径
var centerPoint = new BMap.Point(116.404, 39.915);
var radius = 10000;
// 创建圆形覆盖物
var circle = new BMap.Circle(centerPoint, radius, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "blue",
fillOpacity: 0.1
});
// 添加圆形覆盖物到地图上
map.addOverlay(circle);
```
其中,`strokeColor`、`strokeWeight` 和 `strokeOpacity` 分别表示边框颜色、边框宽度和边框透明度,`fillColor` 和 `fillOpacity` 分别表示填充颜色和填充透明度。
完整的示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图画圆示例</title>
<style type="text/css">
#map-container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("map-container");
// 初始化地图,设置中心点和缩放级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
// 定义圆心坐标和半径
var centerPoint = new BMap.Point(116.404, 39.915);
var radius = 10000;
// 创建圆形覆盖物
var circle = new BMap.Circle(centerPoint, radius, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "blue",
fillOpacity: 0.1
});
// 添加圆形覆盖物到地图上
map.addOverlay(circle);
</script>
</body>
</html>
```
注意,以上示例中的 `你的AK` 需要替换为你在百度开发者平台申请的应用的 API Key。