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;//保存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 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>