腾讯地图圆形范围搜索
前端实现效果如下
实现代码如下
在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>