vue3高德地图+搜索+点击获取经纬度

经纬度"/>

vue3高德地图+搜索+点击获取经纬度

首先 安装依赖

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

html（设置一个容器）点击位置控制台可以打印到数据 如果想要回显到input 只需在input内绑定v-modal即可

<template><div><input style="width: 80%; height: 30px" v-model="mapData.keyword" @keydown.enter="search" /><button @click="search">搜索</button><div id="container" class="map" style="height: 400px; border-radius: 5px"></div></div>
</template>

script

<script setup>
//引入import {onMounted,ref,reactive} from 'vue';import AMapLoader from '@amap/amap-jsapi-loader';const map = ref(null);const mapData = reactive({map: {},keyword: '',selectedLocation: {},selectedAddress: '',});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: [113.984358, 35.288668],layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],});mapInstance.on('click', (e) => {//点击位置获取经纬度const lng = e.lnglat.getLng();const lat = e.lnglat.getLat();// 触发父组件传递的回调函数// this.$emit('map-click', lng, lat);console.log(lng, lat);});mapData.map = mapInstance;}).catch((e) => {console.log(e);});});const search = () => {console.log(mapData.keyword);if (mapData.keyword) {AMapLoader.load({key: '',//key值version: '1.4.15',plugins: ['AMap.PlaceSearch'],}).then((AMap) => {const placeSearch = new AMap.PlaceSearch({city: '',map: mapData.map,});console.log(mapData.keyword);placeSearch.search(mapData.keyword, (status, result) => {console.log(status, result.info);if (status === 'complete' && result.info === 'OK') {const pois = result.poiList.pois;if (pois.length > 0) {const {location} = pois[0];mapData.map.setCenter(location);}} else {console.log('搜索失败或无结果');}});}).catch((e) => {console.log(e);});}};
</script>

style

<style scoped>.map {width: 100%;}
</style>

效果：

如果想要更改地图的图层颜色 就把这个layers更改为以下：

layers: [new AMap.TileLayer.RoadNet(),new AMap.TileLayer.WMS({url: '', // wms服务的url地址blend: false, // 地图级别切换时，不同级别的图片是否进行混合tileSize: 512, // 加载WMS图层服务时，图片的分片大小params: {'LAYERS': 'topp:states',VERSION: '1.3.0'} // OGC标准的WMS地图服务的GetMap接口的参数})],

效果