使用腾讯地图，在地图上圈选标记半径范围

1、引入地图：

html 复制代码

<!-- 引入腾讯地图 -->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization,service"></script>

2、具体实现如下：

javascript 复制代码

export default {
    data() {
		return {
            map: '', //map
            marker: null, //地图标记
			circle: null, //地图范围的圆   
        }
    },
    methods: {
        init() { //初始化地图
			this.$nextTick(()=> {
				this.map = new TMap.Map("container", {
				    center: new TMap.LatLng(39.984121, 116.307484), // 设置地图中心点
					zoom: 10, // 设置地图缩放级别
				});
			})
		},
        setMarker(lat,lng){ //地图标记
			  if(this.marker){
				this.marker.setMap(null);
			  }
			  this.marker = new TMap.MultiMarker({
				map: this.map,
				styles: {
				  marker: new TMap.MarkerStyle({
					"width": 35,
					"height": 35,
					"anchor": { x: 16, y: 32 },
					"src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png"
				  })
				},
				geometries: [
				  {
					id: "marker",
					position: new TMap.LatLng(lat, lng),
					styleId: "marker"
				  }
				]
			  });

			  this.map.setCenter(new TMap.LatLng(lat, lng));
		},
        //半径输入
		intChange(e) {
			e.target.value = e.target.value? e.target.value.replace(/[^0-9]\d*/g, '') : '';
			if(e.target.value){
				this.search()
			}
		},
		search() { //实时获取地里位置标记地图
			var that = this;	
			if(this.longitude && this.latitude){
				this.setMarker(this.latitude,this.longitude) //地图标记
					if(this.distance){  //根据半径圈选范围
						let distance = Number(this.distance)
						if (!Number.isFinite(distance)) {
						   return
						}
						if(this.circle){
							this.circle.setMap(null);
						}
						this.circle = new TMap.MultiCircle({
						      map: that.map,
						      geometries: [{
						        center: new TMap.LatLng(that.latitude, that.longitude), // 圆心坐标
						        radius: distance, // 圆的半径，单位为米
						        color: '#FF0000', // 圆的填充颜色
								borderColor: '#FF0000', // 圆的边框颜色
								borderWidth: 2, // 边框宽度
								borderOpacity: 0.8, // 边框透明度
								colorOpacity: 0.2 // 填充透明度
						      }]
						    });
						let zoom=that.getZoom(that.distance)
						this.map.setCenter(new TMap.LatLng(this.latitude, this.longitude));
						this.map.setZoom(zoom);
				}
			}
		},
        /*根据距离获取地图放大缩小的倍数*/
        getZoom(distance){
                let zoom=3;
                if(distance<1100000){
                     zoom=4;
                }
                if(distance<600000){
                     zoom=5;
                }
                if(distance<300000){
                     zoom=6;
                }
                if(distance<100000){
                     zoom=7;
                }
                if(distance<50000){
                     zoom=8;
                }
                if(distance<20000){
                     zoom=10;
                }
                if(distance<9000){
                     zoom=11;
                }
                if(distance<5000){
                     zoom=12;
                }
                if(distance<2000){
                     zoom=13;
                }
                if(distance<1000){
                     zoom=14;
                }
                if(distance<500){
                     zoom=15;
                }
                if(distance<200){
                     zoom=16;
                }
                if(distance<100){
                     zoom=17;
                }
                if(distance<50){
                     zoom=18;
                }
                return zoom
        },
    }，
    mounted() {
        this.$nextTick(() => {
			this.init();
		})
    }
}