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

效果图:高德地图搜索api支持模糊搜索.高德地图key申请:安装依赖:npm i amap-jsapi-loader -- s地图组件页面:template div classmain div classform !--搜索框-- input typetext classinput v-modeladdress idtipinput keyup.enterselect /div !--查询列表,高德地图api绑定id-- div classlist idlist /div !--地图,需要设置宽高-- div classmap idgd_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;//保存AMap init(); }).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 langscss .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-modeldialogVisible2 title地图 width50% :close-on-click-modalfalse div classamap-wrapper div idAmap MyMap refmymap/MyMap /div /div template #footer span classdialog-footer el-button typeprimary clickgetAddress保存/el-button el-button clickdialogVisible 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