利用腾讯地图实现地图选点功能
基于腾讯地图组件实现地图选点功能
使用到了腾讯地图官提供的组件，实现了地图选点
<template>
<iframe id="mapPage" width="100%" height="100%" frameborder="0" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你自己申请的KEY&referer=myapp"></iframe>
</template>
<script setup>
import { ref } from 'vue'
const key = '自己申请到的Key'
window.addEventListener(
'message',
function (event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data
if (loc && loc.module == 'locationPicker') {
//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
// loc 这里面存放详细的位置信息
emit('addressInfo', loc)
}
},
true
)
</script>
<style lang="scss">
// 样式自己去修改，可以使用到样式渗透
:deep(.map-wrap) {
height: 60%;
}
</style>
我是将这个代码封装成了组件，在使用的地方直接调用就可以.
其中:
window.addEventListener(
'message',
function (event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data
if (loc && loc.module == 'locationPicker') {
//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
// loc 这里面存放详细的位置信息
emit('addressInfo', loc)
}
},
true
)
当这段代码被执行时，它会添加一个事件监听器，用于监听浏览器窗口的message事件。
第一个参数是要监听的事件类型，这里是message，表示监听来自窗口的消息事件。
第二个参数是一个回调函数，当message事件被触发时，回调函数会被执行。
在回调函数中，它首先通过event.data获取传递过来的数据，并将其保存在一个变量loc中。
接下来，通过判断loc对象中的module属性是否为locationPicker来确定这个消息是否来自选点组件。这样做的目的是为了避免处理来自其他应用程序的消息。
如果条件满足，即该消息确实来自选点组件，则会触发一个自定义的事件addressInfo，并将loc对象作为参数传递给该事件。这可以通过一个emit函数来实现，该函数的作用是触发指定名称的事件，并传递相关的数据。这样其他部分的代码就可以订阅并处理addressInfo事件，从而获取位置信息并执行相应的逻辑。
当你在地图选点后点击下面的信息就能看到对应的数据了。
基于腾讯地图实现地图选点功能(手写)
这是最终实现的效果:
有时候的腾讯地图组件的选点功能会稳定，或者失效，显示列表更新失败这就导致可能用户使用感受较差，有时候就必须手写一份，下面的代码是手写的代码以及对应的代码说明：👇👇👇👇
1.首先你需要在项目的html文件引入腾讯地图(vue3的项目)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=这里是你申请的key"></script>
</body>
</html>
- 将地图选点功能封装成组件，实现代码的高复用。
<template>
<div>
<div class="container" id="container">
<img class="coordinate" src="@/assets/坐标.png" alt="图片加载失败" />
</div>
</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue'
import axios from 'axios'
//地图
const dataMap = reactive({
map: '',
markerLayer: '',
latitude: '', //纬度
lngitude: '', //经度
})
onMounted(() => {
getlocation() //获取经纬度
initMap() // 初始化地图
})
//初始化地图
const initMap = () => {
dataMap.map = new qq.maps.Map(document.getElementById('container'), {
center: new qq.maps.LatLng(45.190524, 124.797766), //设置地图中心点坐标
zoom: 20, //设置地图缩放级别
})
qq.maps.event.addListener(dataMap.map, 'center_changed', center_changed)
}
// 监听地图拖动获取经纬度
const center_changed = () => {
dataMap.latitude = dataMap.map.getCenter().lat
dataMap.lngitude = dataMap.map.getCenter().lng
console.log('选点后的经纬度：', dataMap.latitude, dataMap.lngitude)
}
//获取经纬度
const getlocation = async () => {
const res = await axios.get('/api', {
params: {
key: '自己申请的key',
},
})
dataMap.map.setCenter(new qq.maps.LatLng(res.data.result.location.lat, res.data.result.location.lng))
}
</script>
<style lang="scss" scoped>
.container {
box-sizing: border-box;
margin: 50px;
width: 800px;
height: 400px;
border: 1px solid #999;
.coordinate {
z-index: 9999;
position: relative;
top: 50%;
left: 50%;
}
}
</style>
- 其中中心点的图片是自己设置上的，下面给提供了这个图片的地址，大家可以下载使用
图片地址:img1.imgtp.com/2023/11/08/…
中心点的位置是根据定位设置的，如果大家使用的容器的宽度和高度和我的不一样，需要手动的设置。
作者：LuHang
来源：juejin.cn/post/7298361908443463734
来源：juejin.cn/post/7298361908443463734
