vue3使用高德地图获取经纬度

首先安装依赖

cnpm i @amap/amap-jsapi-loader --save

<script setup>
import { onMounted, reactive, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'const map = ref(null)
const mapData = reactive({map: {},keyword: '',selectedLocation: {},selectedAddress: '',marker: null, // 用于存储选中位置的标记
})
const lng = ref(0)
const lat = ref(0)
onMounted(() => {window._AMapSecurityConfig = {securityJsCode: '', // 密钥}AMapLoader.load({key: '', // key值version: '1.4.15',plugins: ['AMap.PlaceSearch'],}).then((AMap) => {const mapInstance = new AMap.Map('container', {viewMode: '2D',zoom: 11,center: [116.397033, 39.917606],layers: [new AMap.TileLayer.RoadNet(),new AMap.TileLayer.WMS({url: 'https://ahocevar.com/geoserver/wms',blend: false,tileSize: 512,params: {LAYERS: 'topp:states',VERSION: '1.3.0',},}),],scrollWheel: true, // 启用滚动缩放})mapInstance.on('click', (e) => {lng.value = e.lnglat.getLng()lat.value = e.lnglat.getLat()// 移除之前的标记if (mapData.marker) {mapData.marker.setMap(null)}// 创建新的标记const marker = new AMap.Marker({position: [lng.value, lat.value],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置})// 将标记添加到地图marker.setMap(mapInstance)// 存储选中位置的标记mapData.marker = marker// 将地图中心设置为选中位置mapData.map.setCenter([lng.value, lat.value])})mapData.map = mapInstance}).catch((e) => {console.log(e)})
})function search() {if (mapData.keyword) {AMapLoader.load({key: '',version: '1.4.15',plugins: ['AMap.PlaceSearch'],}).then((AMap) => {const placeSearch = new AMap.PlaceSearch({city: '全国', // 请根据实际情况设置城市map: mapData.map,})placeSearch.search(mapData.keyword, (status, result) => {console.log(result) // 输出完整的搜索结果if (status === 'complete') {const pois = result.poiList.poisif (pois.length > 0) {const { location } = pois[0]// 移除之前的标记if (mapData.marker) {mapData.marker.setMap(null)}// 创建新的标记const marker = new AMap.Marker({position: location,icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',offset: new AMap.Pixel(-15, -30),})// 将标记添加到地图marker.setMap(mapData.map)// 存储选中位置的标记mapData.marker = marker// 将地图中心设置为选中位置mapData.map.setCenter(location)}}else {console.log('搜索失败或无结果')}})}).catch((e) => {console.log(e)})}
}function zoomIn() {mapData.map.zoomIn()
}function zoomOut() {mapData.map.zoomOut()
}
</script><template><div><input v-model="mapData.keyword" style="width: 80%; height: 30px;" @keydown.enter="search"><button @click="search">搜索</button><button @click="zoomIn">放大</button><button @click="zoomOut">缩小</button><div id="container" class="map" style="height: 400px; border-radius: 5px;" /><div>经度：{{ lng }}</div><div>经度：{{ lat }}</div></div>
</template><style scoped>.map {width: 100%;}
</style>