腾讯地图圆形范围搜索

腾讯地图圆形范围搜索

前端实现效果如下


实现代码如下

在index.html中引入
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的腾讯地图key"></script>

使用组件中，查询主要作用了腾讯地图isPointInPolygon方法进行了范围查询

<template>
	<div class="post" ref="mapRef"></div>
</template>
<script setup>
const mapRef = ref()
// 地图
let map = null
// 点位信息
let position = null
// 画圆信息
let circle = null
// 弹框内容
let infoWindow=null
// 点位信息
let marker={
  marker1:null,
  marker2:null,
}
// 点位的构造函数
function PointsData(styleId, location, content) {
	this.styleId = styleId
	this.location = location
	this.content = content
}
// 处理点位的函数
function pointsDispose(item) {
	return (
		item?.map((item) => {
			let { styleId, location, content } = item
			return {
				styleId,
				position: new TMap.LatLng(location[0], location[1]),
				content
			}
		}) ?? []
	)
}
// 点击点位
const  handleMarker2Click=(evt)=>{
  infoWindow.open() //打开信息窗
	infoWindow.setPosition(evt.geometry.position) //设置信息窗位置
	position = evt.geometry.position
}
// 查询范围
const rangeQuery = () => {
	let buttonRef = document.getElementById('buttonRef')
	buttonRef?.addEventListener('click', (e) => {
		let radius = Number(document.getElementById('queryValueInput').value)
		if (circle) {
			circle.setMap(null)
		}
		circle = new TMap.MultiCircle({
			map,
			geometries: [
				{
					styleId: 'circle',
					center: position,
					radius: radius * 100
				}
			]
		})
    // 查询到的内容
		let data = listData.filter((item) => {
      // isPointInPolygon 点位包含在范围内
			return TMap.geometry.isPointInPolygon(new TMap.LatLng(item.location[0], item.location[1]),circle.geometries[0].paths)
		})
    // 将展示地图marker内容清空
    marker.marker1.setGeometries([])
		let MarkerArr = data.map((i) => {
			return {
				...i,
				position: new TMap.LatLng(i.location[0], i.location[1])
			}
		})
    // 更新地图marker
		marker.marker1.updateGeometries(MarkerArr)
	})
}
// 地图弹框展示的内容
function initPopupTemplateHtml(feature) {
	let domNode = null
	domNode = document.createElement('div')
	domNode.innerHTML = `
                        <input type='text'  name='fname' id="queryValueInput" />
                        <button id="buttonRef">生成</button>
                        `
	return domNode.innerHTML
}
let listData = [
	new PointsData('small', [39.9944, 116.33066], '全聚德'),
	new PointsData('small', [39.97912, 116.30563], '白家大院'),
	new PointsData('small', [39.92442, 116.29199], '大董烤鸭店'),
	new PointsData('small', [39.93282, 116.34813], '四世同堂'),
	new PointsData('small', [39.96305, 116.38794], '便宜坊'),
	new PointsData('small', [39.993057, 116.209706], '小吊梨汤'),
	new PointsData('small', [39.972919, 116.229874], '那家山城')
]
let listData2 = [new PointsData('big', [39.978867, 116.371452], '北平楼')]
const initMap = () => {
	//初始化地图
	map = new TMap.Map(mapRef.value, {
		center: new TMap.LatLng(40.040443786954235, 116.2736683713456),
		zoom: 10
	})
  //初始化infoWindow
	infoWindow = new TMap.InfoWindow({
		map,
		position: new TMap.LatLng(39.984104, 116.307503),
		offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素
		content: initPopupTemplateHtml()
	})
	infoWindow.close() //初始关闭信息窗关闭
	 marker.marker1 = new TMap.MultiMarker({
		map, // 显示Marker图层的底图
		styles: {
			small: new TMap.MarkerStyle({
				// 点标注的相关样式
				width: 34, // 宽度
				height: 46, // 高度
				anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
				src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png', // 标注点图片url或base64地址
				color: '#333', // 标注点文本颜色
				size: 16, // 标注点文本文字大小
				direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
				offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
				strokeColor: '#fff', // 标注点文本描边颜色
				strokeWidth: 2 // 标注点文本描边宽度
			})
		},
		enableCollision: false, // 开启碰撞
		geometries: pointsDispose(listData)
	})
   marker.marker2 = new TMap.MultiMarker({
		map, // 显示Marker图层的底图
		styles: {
			big: new TMap.MarkerStyle({
				width: 58,
				height: 76,
				anchor: { x: 36, y: 32 },
				src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png',
				color: '#333',
				size: 22,
				direction: 'bottom',
				strokeColor: '#fff',
				offset: { x: 0, y: 10 },
				strokeWidth: 2
			})
		},
		enableCollision: false, // 开启碰撞
		geometries: pointsDispose(listData2)
	})
  marker.marker2.on('click', handleMarker2Click)
  rangeQuery()
}

onMounted(() => {
	initMap()
})
</script>
<style lang="scss" scoped>
.post {
	height: 100%;
	width: 100%;
}
</style>