Vue+腾讯地图-实现关键词输入提示功能

不废话,上代码~~~

效果图:

1、先去腾讯地图后台创建自己的应用获取到应用的 Key  

腾讯地图后台地址:腾讯位置服务 - 立足生态,连接未来

创建应用的  Key  如下:

2、在项目中添加腾讯地图API的js插件,如下:

<!-- 引入腾讯地图链接 -->
<script src="https://map.qq.com/api/js?v=2.exp&key=54QBZ-ZIXRN-KNEFW-SWNLD-XXXXX-XXXXX"></script>

注:添加位置是在项目的 public -> index.html 文件

3、在项目中开始初始化使用地图,如下:

html部分:
<!-- 地图展示弹窗 --><el-dialog title="选择地点" :visible.sync="dialogVisibleMap" @opened="resizeMap" append-to-body :close-on-click-modal="false" width="65%"><el-select class="search-input" v-model="keyword" filterable remote clearable value-key="id":remote-method="remoteMethod2" @change="onChange2" placeholder="请输入"><el-option v-for="item in addressList" :key="item.id" :label="item.title" :value="item"><span>{{ item.title }}</span><span style="float: right; color: #8492a6; font-size: 12px">{{ item.address }}</span></el-option></el-select><!-- 显示地图的容器 --><div id="map" style="width: 100%; height: 400px"></div></el-dialog>
js: 部分
data() {return {dialogVisibleMap: false,map: null,addressList: [],// 地图搜索返回数据集keyword: '',// 地图搜索输入值ipAddress: {}, // 根据IP获取当前位置信息};
},
methods: {// 由于地图是放在弹窗里边,弹窗第一次打开时不能及时获取到DOM进行渲染,所以使用以下方法进行强制渲染更新resizeMap() {this.getIp();},// 初始化地图组件initMap() {let that = this;let lat = that.ipAddress.location.lat; // 动态绑定中心点的经纬度let lng = that.ipAddress.location.lng;this.map = new qq.maps.Map(document.getElementById("map"), {center: new qq.maps.LatLng(lat, lng), // 设置初始中心点位置zoom: 16, // 地图缩放});// 创建标记点的图标const markerIcon = new qq.maps.MarkerImage('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',null, // 尺寸null, // 偏移量null, // 原点new qq.maps.Size(25, 35) // 图标大小);// 展示当前位置的标记点const marker = new qq.maps.Marker({position: that.map.getCenter(),map: that.map,icon: markerIcon});// 添加地图拖动事件监听器,并获取拖动后的中心点位置经纬度qq.maps.event.addListener(that.map, 'dragend', () => {marker.setPosition(that.map.getCenter());const center = that.map.getCenter(); // 经纬度赋值console.log('Map center:', center.lat, center.lng);// 这里可以将获取到的经纬度传递给其他方法进行处理});},// 通过IP定位获取当前所在地址getIp(){let that = this;this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", {key: '54QBZ-ZIXRN-KNEFW-SWNLD-XXXXX-XXXXX',output: 'jsonp',}).then(res => {that.ipAddress = res.result;// 由于地图是放在弹窗里边,弹窗第一次打开时不能及时获取到DOM进行渲染,所以使用以下方法进行强制渲染更新if (this.map) {qq.maps.event.trigger(this.map, 'resize');} else {this.initMap();}}).catch(err => {console.log("catch", err);});},// 位置模糊搜索remoteMethod2(query) {if (query != '') {this.getAddress(query);} else {this.addressList = [];}},// 地址选择onChange2(val){this.ipAddress = val;this.initMap(); // 选择位置后初始化地图使用最新选择的经纬度,定位到选择的位置}, // 输入框模糊搜索getAddress(query) {this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion/", {key: '54QBZ-ZIXRN-KNEFW-SWNLD-XXXXX-XXXXX',keyword: query,region: '苏州',output: 'jsonp',}).then(res => {console.log(res,'获取返回的地址集合');that.addressList = res.data;}).catch(err => {console.log("catch", err);});},
}

注:接口请求使用的是 this.$jsonp 方式,为的是避免跨域

问题1:腾讯地图接口请求时出现跨域 

解决方案:使用 jsonp 的方式请求才有效,方法如下:

安装 vue-jsonp 插件,在项目中引入,并使用 jsonp 方式进行请求

npm install vue-jsonp@0.1.0 --save

注:默认安装时2.0.0版本,可能因为我的项目vue版本是2.x,不兼容,所以我安装了指定的0.1.0版本。

安装成功后在 main.js 中全局引用:

// 引入此插件解决调用高德地图跨域问题
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

至此完成!!!

测试有效!!!感谢支持!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/270106.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习JAVA的第十四天(基础)

目录 Collection集合 迭代器遍历 增强for遍历 Lambda表达式遍历 List集合 遍历 数据结构 栈 队列 数组 链表 前言&#xff1a; 学习JAVA的第十三天 Collection集合 Collection的遍历方式&#xff1a; 迭代器&#xff08;不依赖索引&#xff09;遍…

Java线程池及Thread相关问题

Java线程池及Thread相关问题 一、Java线程池有哪些核心参数&#xff0c;分别有什么的作用&#xff1f;二、线程池有哪些拒绝策略&#xff1f;三、线程池的执行流程?四、线程池核心线程数怎么设置呢&#xff1f;方式一方式二基本原则 五、ThreadLocal底层是怎么实现的&#xff…

SoraAI优先体验资格注册教程

SoraA1视频工具优先体验资格申请 申请网址&#xff1a;https://openai.com/form/red-teaming-network 申请步骤&#xff1a; 填写基础信息 请使用英文根据内容填写以下内容&#xff0c;名、姓、电子邮件、居住国家、组织隶属关系(如果有)、教育水平 、学位&#xff08;哪个领…

利用Python副业赚钱,看完这篇你就懂了!

Python都可以做哪些副业&#xff1f; 1、兼职处理数据Excel整理数据功能虽然很强大&#xff0c;但在Python面前&#xff0c;曾经统治职场的它也的败下阵来。因为Python在搜集数据整理分析数据的过程中更加便捷&#xff0c;通过几行代码还可以实现自动化操作。 如果你学会Pyth…

指针运算笔试题解析

题目1&#xff1a; int main() { int a[5] { 1, 2, 3, 4, 5 }; int* ptr (int*)(&a 1); printf("%d %d", *(a 1), *(ptr - 1)); return 0; } ptr中存放了整个数组的地址&#xff0c;ptr是int*类型&#xff0c;&a1跳到5的地址后又被强制类…

EasyX的学习2

消息处理——漂亮的按钮(鼠标) 用到的函数 1.消息结构体变量类型&#xff1a;使用ExMessage ExMessage msg{ 0 }; 定义一个变量名为msg的ExMessage结构体变量并初始化为0 2.获取消息函数&#xff1a;peekmessage函数 //获取消息 peekmessage(&msg, EX_MOUSE); 两个参…

【打工日常】使用docker部署在线Photopea用于linux下替代ps

一、Photopea介绍 linux没有ps适配&#xff0c;对于有时候工作来说确实不方便&#xff0c;我找了很久&#xff0c;才找到了一款功能可以跟ps接近的在线软件&#xff0c;使用docker部署就可以了。它是ps的最佳替代品之一&#xff0c;其界面几乎与ps相同&#xff0c;只不过它是在…

MySQL基础-----SQL语句之DCL数据控制语句

目录 前言 一、管理用户 1.查询用户 2.创建用户 3.修改用户密码 4.删除用户 案例 二、权限控制 1.查询权限 2.授予权限 3.撤销权限 案例 前言 本期我们学习SQL语句的最后一部分内容&#xff0c;也就是数据控制语句DCL。DCL英文全称是Data Control Language(数据控制语…

鱼哥赠书活动第12期:《基于React低代码平台开发》

鱼哥赠书活动第12期&#xff1a;《基于React低代码平台开发》 一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望内容简介&#xff1a;作者简介如何阅读&#xff1a;适合阅读人群&#xff1a;赠书抽奖规则:往期…

DMA 链表模式(LLI)深度解析

在进行一次 DMA 读或者写的时候&#xff0c;可以配置多个链表&#xff0c;从而当一个链表的数据传输完成时&#xff0c;会跳到下一个链表的起始地址&#xff0c;并继续传输数据&#xff0c;直到链表的下一个地址为 0。如果 DMA 使能了完成中断&#xff0c;则当 DMA 发送或者接收…

15 实战:Kaggle房价预测 + 课程竞赛:加州2020年房价预测【李沐动手学深度学习课程笔记】

15 实战&#xff1a;Kaggle房价预测 课程竞赛&#xff1a;加州2020年房价预测【李沐动手学深度学习课程笔记】https://zhuanlan.zhihu.com/p/685343754 写在前面&#xff1a;这里格式很乱&#xff0c;代码直接去知乎copy 1 实战Kaggle比赛&#xff1a;预测房价 1.1 实现几个函…

【源码】imx6ull实现触摸屏单点实验-移植tslib和qt

一、本实验实验的器材&#xff1a; 1.正点原子imx6ull的阿尔法开发板v2.2 2.屏幕ALIENTEK 4.3 RGBLCD 二、实验已经移植好的文件&#xff1a; 仓库代码&#xff1a;https://gitee.com/wangyoujie11/atkboard_-linux_-driver.git 1.文件说明 arm-qt.tar.bz2&#xff1a;移植好的…

基于SSM的农业信息管理系统的设计与实现(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的农业信息管理系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

Mint_21.3 drawing-area和goocanvas的FB笔记(四)

Cairo图形输出 cairo的surface可以是pixbuf, 可以是screen, 可以是png图&#xff0c;也可以是pdf文件 、svg文件、ps文件&#xff0c;定义了surface就可以用cairo_create(surface)产生cairo context, 操作cairo context就可以方便地在surface上画图&#xff0c;如果surface是p…

Linux基本命令

一、基本命令 修改mysql端口号 vim /etc/my.cnf云服务器ssh端口修改 vim /etc/ssh/sshd_config1.1 关机和重启 关机 shutdown -h now 立刻关机 shutdown -h 5 5分钟后关机 poweroff 立刻关机重启 shutdown -r now 立刻重启 shutdown -r 5 5分钟后重启 reboot 立刻重启1.2…

使用mysqld --install命令时出现MSVCR120.dll文件丢失错误

Visual C 2013 and Visual C Redistributable Package https://support.microsoft.com/en-us/help/3179560/update-for-visual-c-2013-and-visual-c-redistributable-package 进去之后先找到自己的版本&#xff0c;x64还是x86&#xff0c;下载 vcredit &#xff0c;进行安装即…

小程序固定头部:CSS实现

效果图 代码逻辑&#xff1a;设置头部的高度&#xff0c;浮动固定后&#xff0c;再加个这个高度的大小的外边距 .weui-navigation-bar {position: fixed;top: 0px;left: 0px;right: 0px;height:90px; } .weui-navigation-bar_bottom{height:90px; }

高转化利器】Xinstall实现H5唤醒App,打开指定页面,轻松满足营销需求!

在移动互联网时代&#xff0c;App的拉新促活对于企业的发展至关重要。为了提升用户体验和转化率&#xff0c;Xinstall推出了一项强大的功能——H5唤醒App。通过这一功能&#xff0c;用户可以直接从Web页面拉起App&#xff0c;并在拉起过程中通过传参打开指定页面&#xff0c;满…

【Vue3】Hooks:一种全新的组件逻辑组织方式

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

MATLAB环境下基于离散小波变换的体外血管图像处理

下面简要介绍小波变换的部分应用。 信号去噪。小波去噪是根据有效信号和噪声信号在小波变换后表现出的不同特性实现的&#xff0c;一般可用于去除语音、图像、视频等中的噪声信号。小波去噪方法根据对小波系数的非线性处理方式分为三类&#xff0c;分别是小波变换模极大值去噪…