VUE3 腾讯地图 拾取坐标 (选地)
1. 注册key
https://lbs.qq.com/dev/console/application/mine (腾讯地图)
2. 具体代码
<div class="map-picker-container">
<div id="mapContainer" class="map-container"></div>
<!-- <div class="coordinate-info">
当前坐标:{{ state.latitude }}, {{ state.longitude }}
</div> -->
</div>
const MAP_KEY = 'XXX-XXX-XXXX-XXXX'
const visibleModel = ref(true)
const state = reactive({
mapObj: null,
markerObj: null,
latitude: null,
longitude: null
})
onMounted(() => {
const containerId = 'mapContainer'
const TencentMapSDK = document.createElement('script')
TencentMapSDK.src = `https://map.qq.com/api/js?v=2.exp&key=${MAP_KEY}&callback=initMapSDK`
document.head.appendChild(TencentMapSDK)
console.log(123456)
window.initMapSDK = () => {
// eslint-disable-next-line no-undef
state.mapObj = new qq.maps.Map(document.getElementById(containerId), {
// eslint-disable-next-line no-undef
center: new qq.maps.LatLng(36.622438, 101.78043),
zoom: 12
})
// eslint-disable-next-line no-undef
qq.maps.event.addListener(state.mapObj, 'click', (event) => {
const location = event.latLng
state.latitude = location.getLat().toFixed(6)
state.longitude = location.getLng().toFixed(6)
if (!state.markerObj) {
// eslint-disable-next-line no-undef
state.markerObj = new qq.maps.Marker({
position: location,
map: state.mapObj
})
} else {
state.markerObj.setPosition(location)
}
})
}
})
const handleOk = () => {
if (state.latitude && state.longitude) formState.coordinate = `${state.latitude},${state.longitude}`
}
<style lang="scss">
.map-picker-container {
display: flex;
flex-direction: column;
}
.map-container {
height: 500px;
}
.coordinate-info {
margin-top: 10px;
text-align: center;
}