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

效果图:
高德地图搜索api支持含糊搜索.

高德地图key申请:

安装依靠:npm i @amap-jsapi-loader -- s
地图组件页面:

1. <template>
2.   <div class="main">
3.     <div class="form">
4.       <!--搜索框-->
5.       <input type="text" class="input" v-model="address" id="tipinput"     @keyup.enter="select">
6.     </div>
7.     <!--查询列表,高德地图api绑定id-->
8.     <div class="list" id="list">
9.     </div>
10.     <!--地图,需要设置宽高-->
11.     <div class="map" id="gd_map_d"></div>
12.   </div>
13. </template>
15. <script setup>
16. import AMapLoader from '@amap/amap-jsapi-loader';
17. //data
18. const { proxy } = getCurrentInstance();
19. const address = ref("");
20. let geocoder = null;
21. let MyMap = null;
22. let map = null;
23. //methods
24. const select = () => {
25.   //构造地点查询类
26.   var placeSearch = new MyMap.PlaceSearch({
27.     pageSize: 3, // 单页显示结果条数
28.     pageIndex: 1, // 页码
29.     city: "010", // 兴趣点城市
30.     citylimit: false,  //是否强制限制在设置的城市内搜索
31.     map: map, // 展现结果的地图实例
32.     panel: "list", // 结果列表将在此容器中进行展示。
33.     autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
34.   });
35.   //关键字查询
36.   placeSearch.search(proxy.address);
37. }
38. const getAddress = () => {
39.   let cc = map.getCenter();
40.   return new Promise((resolve, reject) => {
41.     geocoder.getAddress([cc.lng, cc.lat], (status, result) => {
42.       if (result.regeocode.formattedAddress) {
43.         resolve(result.regeocode.formattedAddress)
44.       } else {
45.         resolve("");
46.       }
47.     })
48.   })
49. }
50. //mapinit
51. window._AMapSecurityConfig = {
52.   securityJsCode: '填写高德地图Web端(JS API)申请的密钥',
53. }
54. AMapLoader.load({
55.   "key": "填写高德地图Web端(JS API)申请的key", // 申请好的Web端开发者Key
56.   "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
57.   "plugins": ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
58. }).then((AMap) => {
59.   MyMap = AMap;//保存AMap
61.   init();
62. }).catch(e => {
63.   console.log(e);
64. })
65. const init = () => {
66.   //绘制MyMap实例地图
67.   map = new MyMap.Map('gd_map_d', {
68.     zoom: 14, //初始地图级别
69.     center: [121.473432, 31.22919],
70.     resizeEnable: true
71.   })
72.   geocoder = new MyMap.Geocoder({
73.     city: "010", //城市设为北京，默认：“全国”
74.   });
75.   var auto = new MyMap.AutoComplete({
76.     input: "tipinput"
77.   });
78. }
79. defineExpose({
80.   getAddress  //将事件暴露出去
81. })
82. </script>
83. <style scoped lang="scss">
84. .main {
85.   width: 100%;
86.   height: 350px;
87.   position: relative;
89.   .map {
90.     width: 100%;
91.     height: 100%;
92.   }
94.   .form {
95.     position: absolute;
96.     left: 10px;
97.     top: 10px;
98.     z-index: 999;
100.     .input {
101.       width: 180px;
102.       line-height: 30px;
103.       padding-left: 5px;
104.       box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
105.       outline: none;
106.       border-radius: 5px;
107.       border: none;
108.     }
109.   }
111.   .list {
112.     position: absolute;
113.     top: 10px;
114.     right: 10px;
115.     height: 300px;
116.     width: 240px;
117.     z-index: 999;
119.     .li {
120.       line-height: 25px;
122.     }
123.   }
124. }
125. </style>

复制代码

父组件页面

1. <template>
2.     <el-dialog v-model="dialogVisible2" title="地图" width="50%" :close-on-click-modal="false">
3.   <div class="amap-wrapper">
4.     <div id="Amap">
5.       <MyMap ref="mymap"></MyMap>
6.     </div>
7.   </div>
8.   <template #footer>
9.     <span class="dialog-footer">
10.       <el-button type="primary" @click="getAddress">保存</el-button>
11.       <el-button @click="dialogVisible = false">
12.         取消
13.       </el-button>
14.     </span>
15.   </template>
16. </el-dialog>
17. </template>
19. <script setup>
20. import { computed } from '@vue/reactivity';
21. import { getCurrentInstance, ref, reactive } from 'vue';
22. const { proxy } = getCurrentInstance();
23. const dialogVisible = ref(true);
24.     const getAddress = () => {
25.   proxy.$refs.mymap.getAddress().then(res => {
26.     console.log(res);
27.   })
28. }
29. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。