vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
vue离线地图有哪些
vue 集成腾讯地图实现api附DEMO目录
- 写作背景
- 项目说明
- 前期准备工作
- 注意点
.之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大部分都是原生js,且比较基础,并且很多高级Api分布比较分散,不利于开发者查找,所以使用vue结合网上的开源框架vue-admin模仿官方,做一个开箱即用的Demo集合出来。 down下项目来会有个登录界面,随便输入六个字符就可以了(笔者很懒,懒得移除了,已经没救了)
项目预览
各位看官可以从这个地址直接拉取代码 然后复制粘贴就好了
项目说明由于笔者时间仓促,目前只整理了四个模块分别是(如果效果不错将继续更新,欢迎各位道友提issues,看到会及时解决):
- 基础地图引入与展示模块
- 3D/2D切换 与效果对比
- 关于位置服务的一些基础api 依次为:定位当前位置,定位到初始化位置,定位中心点,添加鼠标点击事件,切换隐藏与显示地图文字
- mark标记的基础使用,依次为:添加标记,结束添加标记事件,mark标记点可拖拽。
点击这条连接注册腾讯地图开发者账号
注意点这是一个Vue集成腾讯地图的demo
项目中需要在index.html上事先引入以下内容
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你注册之后获取的key值"></script> <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script> <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=你注册之后获取的key值"></script>
然后在main.js 文件下写入这几行代码
Vue.prototype.$Map = window.TMap Vue.prototype.$Location = new window.qq.maps.Geolocation('你自己的key', '腾讯地图模板-博客展示')
再次提醒 点击这条连接可以注册腾讯地图开发者账号。
书到此地,大部分道友应该直接复制粘贴就可以完美的跑起腾讯地图了。
以下是2021.1.16月更新
调用此服务必须拥有开发者账号并申请属于自己的key 这里是申请地址
具体使用方法:
通过get方法调用 :
{ rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=你的key&get_poi=1'}
位置逆解析有几处坑在这里陈列一下:
第一大坑 跨域
不知道是不是只有自己这样,在本地启动项目时调用逆解析地址会报跨域问题,需要各位在程序里配置好跨域代码如下
在vue.config.js里面配置跨域(如果是cli低版本的朋友,麻烦自行网上搜索解决方案,已经比较健全了,笔者就不在这里赘述)
devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { // 配置跨域 '/qq': { target: 'https://apis.map.qq.com/', // 这里后台的地址模拟的;应该填写你们真实的后台接口 ws: true, changOrigin: true, // 允许跨域 pathRewrite: { '^/qq': '' // 请求的时候使用这个api就可以 }} },
第二大坑 授权报错
报错类型如下
{ "status": 110, "message": "请求来源未被授权, 此次请求来源域名:localhost9528" }
{ "status": 112, "message": "IP未被授权,当前IP:127.0.0.1" }
{ "status": 111, "message": "签名验证失败" }
解决方法均是通过腾讯位置服务平台,结合官方文档配置key管理,如图
详细api参数请参照 官方文档
到此这篇关于vue 集成腾讯地图实现api(附DEMO)的文章就介绍到这了,更多相关vue 集成腾讯地图内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vuevlog制作软件(Vue实现Dialog封装)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vueweb端聊天(Vue实现聊天界面)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
热门推荐
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- dockerexec参数详解(docker安装pxc集群的详细教程)
- 织梦dedecms的时间调用标签(dedecms/织梦专题节点列表内容实现分页的方法介绍)
- php服务器有哪些(php服务器的系统详解)
- python flask部署实例(Python Flask框架扩展操作示例)
- 云服务器安全么(云服务器如何识别真假)
- python 暗弱目标提取(Python提取频域特征知识点浅析)
- docker镜像大是否会导致启动慢(docker下载镜像太慢的解决方案)
- nginx更改html内容(apache与iis下让html格式的页面也同样具有shtml的动态解析)
- python生成密码字典教程(Python利用字典破解WIFI密码的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9