开发者社区> mfqqtnwnngpxm> 正文

Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)

简介: Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
+关注继续查看

Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)

写作背景

.之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大部分都是原生js,且比较基础,并且很多高级Api分布比较分散,不利于开发者查找,所以使用vue结合网上的开源框架vue-admin模仿官方,做一个开箱即用的Demo集合出来。 down下项目来会有个登录界面,随便输入六个字符就可以了(笔者很懒,懒得移除了,已经没救了)

项目预览

在这里插入图片描述

各位看官可以从这个地址直接拉取代码 然后复制粘贴就好了

项目说明

由于笔者时间仓促,目前只整理了四个模块分别是(如果效果不错将继续更新,欢迎各位道友提issues,看到会及时解决):

  1. 基础地图引入与展示模块
  2. 3D/2D切换 与效果对比
  3. 关于位置服务的一些基础api 依次为:定位当前位置,定位到初始化位置,定位中心点,添加鼠标点击事件,切换隐藏与显示地图文字
  4. 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'}

位置逆解析有几处坑在这里陈列一下:

  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就可以
        }}
    },
  1. 第二大坑 授权报错

    报错类型如下
    
     {
    "status": 110,
    "message": "请求来源未被授权, 此次请求来源域名:localhost9528"
    }
     {
    "status": 112,
    "message": "IP未被授权,当前IP:127.0.0.1"
    }
 {
    "status": 111,
    "message": "签名验证失败"
  }

解决方法均是通过腾讯位置服务平台,结合官方文档配置key管理,如图在这里插入图片描述

详细api参数请参照 官方文档

#### 题外话
笔者致力于开发遇到的各种复杂组件,虽说授人以鱼不如授人以渔,但是很多情况下我们是需要先恰饭的,所以先把鱼钓上来,希望帮各位刚上路的道友填饱肚子

以下是我所有组件开源的地址与博客 各位如果觉得有用,别忘了点赞与star,感谢支持

前端组件集合文章
vue组件-echarts地图显示柱状图并添加点击事件文档
vue组件之仿钉钉自定义流程图组件文档
vue组件之树状选择器组件文档

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
mqc
MQC功能测试大揭秘(3)- Appium基础篇
上文回顾 上一篇为大家介绍了如何通过appium桌面客户端的方式来快速搭建appium环境,桌面客户端的appium版本目前为1.6.4,更新稍慢于appium项目,但目前已经支持在线更新,大家不用再有客户端版本过低的顾虑。
2491 0
【百度地图API】如何进行地址解析与反地址解析?——模糊地址能搜索到精确地理信息!
原文:【百度地图API】如何进行地址解析与反地址解析?——模糊地址能搜索到精确地理信息! 摘要:   什么是地址解析?   什么是反地址解析?   如何运用地址解析,和反地址解析?   可以同时运用地址解析,和反地址解析麼?答案是,可以的。
1219 0
Java操作Excel文件基础--Java Excel API
        Java Excel API是一个成熟的、开源的Java API,主页地址:http://jexcelapi.sourceforge.net/,通过它开发人员可以动态地读取、写入或者修改Excel文件。
1084 0
【百度地图API】发布静态图API啦!只需一个网址,即可展示定制百度地图!
原文:【百度地图API】发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片。 不需要 JavaScript。我们只需创建一个网址,并将其放入 标记中。
1976 0
Gin-Vue-Admin 使用 gin+vue 进行极速开发的全栈开发基础平台【gva 第二节】
项目介绍 GIN-VUE-ADMIN 是一个基于 vue 和 gin 开发的全栈前后端分离的开发基础平台,拥有 jwt 鉴权,动态路由,动态菜单,casbin 鉴权,表单生成器,代码生成器等功能,提供了多种示例文件,让大家把更多时间专注在业务开发上。
75 0
Gin-Vue-Admin 使用 gin+vue 进行极速开发的全栈开发基础平台【gva 第一节】
功能: 1.增加了 pgsql 数据库初始化,用户可选用 pgsql 进行开发。 2.增加了业务数据库功能,用户可通过 yaml 中配置自己的业务数据库,根据 name 获取业务库进行业务操作,实现框架和业务的数据库分离。 3.oss 集成了华为云 oss。 4.前端打包增加了提示内存不足时的一键 node 内存扩容 build 命令。 5.调整了获取用户信息的方法,增加了不鉴权模式下的用户信息获取方式。 6.配置页面调整。 7.取消了自动化代码中数据库类型和 size 的选择模块,防止自动化代码报错。
47 0
SAP SD基础知识之SD常用BAPI
SAP SD基础知识之SD常用BAPI
36 0
短视频APP开发需要哪些基础功能
传统的图文转播方式已经无法满足用户的心理需求,短视频以短、快等优势将图文以短视频的方式展示,短视频也大大的提高了用户的体验,有必要说下短视频开发一般具备哪些功能
59 0
HaaS UI基础教学九:JSAPI应用包管理
Package JSAPI是HaaS UI提供的一个轻量级应用包管理接口,特别适用于管理小程序应用包的安装信息。
120 0
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载