效果图:
思路是引用高德地图图,通过绘制marker+圆形+折线等组合起来,实现上图效果;
具体代码如下:
html文件中须引入高德地图如下:
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 你的key值对应的秘钥,
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.Autocomplete"></script>
js文件方法:
let map = new AMap.Map('mapDiv', {
layers: [
new AMap.TileLayer.Satellite(),
],
resizeEnable: true,
zoom: 13,
center: [116.452122, 39.881176] //地图中心点
});
var data = {
longitude:'116.452122',
latitude:'39.881176',
radius:'200'
}
Circle(data);
function Circle(data){
var lon = JSON.parse(data.longitude);
var lat = JSON.parse(data.latitude);
var position = [];
position.push(lon,lat);
// 创建标记icon
var icon = new AMap.Icon({
size: new AMap.Size(25, 25),
image: './img/img001.png',
imageOffset: new AMap.Pixel(-58, -38),
})
// 创建标记marker
let marker = new AMap.Marker({
position: position,
icon: icon ,
offset: new AMap.Pixel(-12.5, -12.5),
draggable: true
});
// 创建圆形circle
var circle = new AMap.Circle({
center: position, // 圆心位置
radius: data.radius, // 圆半径
fillColor: '#5589C380', // 圆形填充颜色
strokeColor: '#5589C380', // 描边颜色
strokeWeight: 1, // 描边宽度
fillOpacity: 0.6
});
// 创建折线
let bounds = circle.getBounds();
let point_lon = bounds.northeast.lng,
point_lat = (bounds.northeast.lat + bounds.southwest.lat) / 2;
let path = [circle.getCenter(),new AMap.LngLat(point_lon, point_lat),];
// 绘制
var polyline = new AMap.Polyline({
path: path,
strokeWeight: 1.2,
strokeColor: '#FFE000',
strokeStyle: 'dashed',
strokeDasharray: [5,5]
});
// 创建纯文本标记(半径值)
let text_lon = (circle.getCenter().lng + point_lon) / 2;
let text_lat = point_lat;
// 绘制
var text = new AMap.Text({
text: data.radius + 'm',
anchor:'bottom-center', // 设置文本标记锚点
style:{
'background-color': 'transparent',
'border': 'none',
'font-size':'12px',
'color':'#ffffff'
},
position: [text_lon, text_lat]
});
let overlayGroup = new AMap.OverlayGroup([marker, circle, polyline, text]);
map.add(overlayGroup);
// map.setFitView([circle]);
marker.on('dragging', function (event) {
let position = event.target.getPosition();
circle.setCenter(position);
let new_point_lon = circle.getBounds().northeast.lng,
new_point_lat = (circle.getBounds().southwest.lat + circle.getBounds().northeast.lat) / 2;
let new_path = [
circle.getCenter(),
new AMap.LngLat(new_point_lon, new_point_lat),
];
polyline.setPath(new_path);
text.setPosition(new AMap.LngLat((circle.getCenter().lng + new_point_lon) / 2, new_point_lat));
});
}