高德地图 js 根据指定坐标为中心点,在根据指定公里数绘制圆形边界
时间: 2024-03-09 18:48:31 浏览: 32
下面是一个使用高德地图 JavaScript API 绘制指定公里数圆形边界的简单示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制指定公里数圆形边界</title>
<style type="text/css">
#mapContainer {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的密钥"></script>
<script>
// 初始化地图
var map = new AMap.Map('mapContainer', {
center: [116.397428, 39.90923], // 北京市中心点坐标
zoom: 13 // 缩放级别
});
// 绘制指定公里数的圆形边界
function drawBoundary(lng, lat, radius) {
// 创建圆形边界
var boundary = new AMap.Circle({
center: [lng, lat], // 中心点坐标
radius: radius * 1000, // 半径(注意:高德地图使用米为单位)
strokeColor: "#FF0000",
strokeWeight: 2,
fillOpacity: 0
});
boundary.setMap(map);
}
// 示例:绘制以北京市中心点为中心,半径为5公里的圆形边界
drawBoundary(116.397428, 39.90923, 5);
</script>
</body>
</html>
```
在上面的示例中,我们首先使用 `AMap.Map` 创建了一个地图实例,并设置了地图中心点和缩放级别。接着,我们定义了一个 `drawBoundary` 函数,该函数接受三个参数:中心点经度、中心点纬度和半径,然后使用 `AMap.Circle` 创建一个圆形对象来绘制圆形边界。最后,我们调用 `drawBoundary` 函数来绘制指定公里数的圆形边界。
需要注意的是,上面的示例中使用了 `AMap.Circle` 来绘制圆形边界,使用这种方法绘制出来的圆形边界会比较精确。另外,示例中的半径是以公里为单位的,而 `AMap.Circle` 使用的是以米为单位的半径,因此需要将半径乘以1000来转换为米。如果需要更精确的圆形边界,可以使用更复杂的算法,或者考虑使用高德地图提供的服务来获取更精确的边界信息。