VUE3 腾讯地图 拾取坐标 (选地)
1. 注册key
/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 = `/api/js?v=2.exp&key=${MAP_KEY}&callback=initMapSDK`document.head.appendChild(TencentMapSDK)console.log(123456)window.initMapSDK = () => {// eslint-disable-next-line no-undefstate.mapObj = new qq.maps.Map(document.getElementById(containerId), {// eslint-disable-next-line no-undefcenter: new qq.maps.LatLng(36.622438, 101.78043),zoom: 12})// eslint-disable-next-line no-undefqq.maps.event.addListener(state.mapObj, 'click', (event) => {const location = event.latLngstate.latitude = location.getLat().toFixed(6)state.longitude = location.getLng().toFixed(6)if (!state.markerObj) {// eslint-disable-next-line no-undefstate.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;}
