vue3使用腾讯地图(‘关键词搜索、逆地址解析‘)

 1.登录腾讯地图位置服务进入控制台

• 申请腾讯地图开发者
• 进入控制台申请自己的key

腾讯位置服务 - 立足生态，连接未来

 2.进入vue项目的public文件下的index.html

引入腾讯资源包，并把申请的key填入

<script src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>

 3.创建地图容器

<div id="map" style="width:450px;height:200px;"></div>

 4.初始化地图、设置标记点并开启拖拽监听

5.拖拽标记点获取点位信息，进行逆地址解析

• 前提：为解决跨域需要使用vue-jsonp来联调腾讯地图服务端接口

•  WebService API官网：WebService API | 腾讯位置服务
• 安装vue-jsonp

       npm安装： npm i vue-jsonp -S

       yarn安装： yarn add vue-jsonp

 6.引入入vue-jsonp并联调逆地址解析

7.关键词搜索

8.封装AutoComplete

由于使用ant-design的AutoComplete自动完成组件出现报错并不知原因选择自己简单封装

完整代码 ：