Vue3,setup,高德地图api,实现地图搜索查询地址功能

效果图:

高德地图搜索api支持模糊搜索.

高德地图key申请:

安装依赖:npm i @amap-jsapi-loader -- s

地图组件页面:

<template><div class="main"><div class="form"><!--搜索框--><input type="text" class="input" v-model="address" id="tipinput"     @keyup.enter="select"></div><!--查询列表,高德地图api绑定id--><div class="list" id="list"></div><!--地图,需要设置宽高--><div class="map" id="gd_map_d"></div></div>
</template><script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
//data
const { proxy } = getCurrentInstance();
const address = ref("");
let geocoder = null;
let MyMap = null;
let map = null;
//methods
const select = () => {//构造地点查询类var placeSearch = new MyMap.PlaceSearch({pageSize: 3, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: false,  //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "list", // 结果列表将在此容器中进行展示。autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});//关键字查询placeSearch.search(proxy.address);
}
const getAddress = () => {let cc = map.getCenter();return new Promise((resolve, reject) => {geocoder.getAddress([cc.lng, cc.lat], (status, result) => {if (result.regeocode.formattedAddress) {resolve(result.regeocode.formattedAddress)} else {resolve("");}})})
}
//mapinit
window._AMapSecurityConfig = {securityJsCode: '填写高德地图Web端(JS API)申请的密钥',
}
AMapLoader.load({"key": "填写高德地图Web端(JS API)申请的key", // 申请好的Web端开发者Key"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {MyMap = AMap;//保存AMapinit();
}).catch(e => {console.log(e);
})
const init = () => {//绘制MyMap实例地图map = new MyMap.Map('gd_map_d', {zoom: 14, //初始地图级别center: [121.473432, 31.22919],resizeEnable: true })geocoder = new MyMap.Geocoder({city: "010", //城市设为北京，默认：“全国”});var auto = new MyMap.AutoComplete({input: "tipinput"});
}
defineExpose({getAddress  //将事件暴露出去
})
</script>
<style scoped lang="scss">
.main {width: 100%;height: 350px;position: relative;.map {width: 100%;height: 100%;}.form {position: absolute;left: 10px;top: 10px;z-index: 999;.input {width: 180px;line-height: 30px;padding-left: 5px;box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);outline: none;border-radius: 5px;border: none;}}.list {position: absolute;top: 10px;right: 10px;height: 300px;width: 240px;z-index: 999;.li {line-height: 25px;}}
}
</style>

父组件页面

<template><el-dialog v-model="dialogVisible2" title="地图" width="50%" :close-on-click-modal="false"><div class="amap-wrapper"><div id="Amap"><MyMap ref="mymap"></MyMap></div></div><template #footer><span class="dialog-footer"><el-button type="primary" @click="getAddress">保存</el-button><el-button @click="dialogVisible = false">取消</el-button></span></template>
</el-dialog>
</template><script setup>
import { computed } from '@vue/reactivity';
import { getCurrentInstance, ref, reactive } from 'vue';
const { proxy } = getCurrentInstance();
const dialogVisible = ref(true);const getAddress = () => {proxy.$refs.mymap.getAddress().then(res => {console.log(res);})
}
</script>