地图绘制圆形以及显示半径

迷迭绿

已于 2023-03-30 14:16:49 修改

阅读量3.2k

点赞数 1

分类专栏： map 高德地图 js 文章标签： javascript 前端 html

于 2023-03-29 19:00:00 首次发布

本文链接：https://blog.csdn.net/qq_42832151/article/details/129832416

版权

js 同时被 3 个专栏收录

8 篇文章

订阅专栏

高德地图

3 篇文章

订阅专栏

map

2 篇文章

订阅专栏

该文章展示了如何利用高德地图API在网页中创建地图，包括设置卫星图层，添加Marker（标记）、Circle（圆形）和Polyline（折线）来实现特定的效果。通过JavaScript函数动态调整Marker位置，更新Circle和Polyline，以实现地图元素的交互拖动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

思路是引用高德地图图，通过绘制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));
		});
}