vue 集成腾讯地图实现api(附DEMO)

 更新时间:2021年07月13日 15:32:33   作者:咱们得站着  
之前项目使用腾讯地图,不利于开发者查找,这篇文章主要介绍了vue 集成腾讯地图实现api,具有一定的参考价值,感兴趣的可以了解下

写作背景

.之前项目使用腾讯地图,感觉还是比较好用的,但是官方的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 集成腾讯地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 延时加载JavaScript代码提高速度

    延时加载JavaScript代码提高速度

    这篇文章主要介绍了延时加载JavaScript代码提高速度的相关资料,需要的朋友可以参考下
    2015-12-12
  • 原生JavaScript创建不可变对象的方法简单示例

    原生JavaScript创建不可变对象的方法简单示例

    这篇文章主要介绍了原生JavaScript创建不可变对象的方法,结合简单实例形式分析了基于原生JavaScript创建不可变对象的相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 微信小程序之onLaunch与onload异步问题详解

    微信小程序之onLaunch与onload异步问题详解

    这篇文章主要介绍了微信小程序之onLaunch与onload异步问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JS将制定内容复制到剪切板示例代码

    JS将制定内容复制到剪切板示例代码

    这篇文章主要介绍了JS将制定内容复制到剪切板的方法,需要的朋友可以参考下
    2014-02-02
  • JS实现随机抽选获奖者

    JS实现随机抽选获奖者

    这篇文章主要介绍了JS实现随机抽选获奖者,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • javascript文本框内输入文字倒计数的方法

    javascript文本框内输入文字倒计数的方法

    这篇文章主要介绍了javascript文本框内输入文字倒计数的方法,涉及javascript针对键盘事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • document.documentElement的一些使用技巧

    document.documentElement的一些使用技巧

    documentElement 属性可返回文档的根节点,接下来为大家详细介绍下document.documentElement的一些使用技巧,感兴趣的朋友可以参考下哈
    2013-04-04
  • JS+html5制作简单音乐播放器

    JS+html5制作简单音乐播放器

    这篇文章主要为大家详细介绍了JS html5制作简单音乐播放器的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • p5.js临摹动态图形实现方法详解

    p5.js临摹动态图形实现方法详解

    这篇文章主要为大家详细介绍了p5.js临摹动态图形的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Javascript实现页面滚动时导航智能定位

    Javascript实现页面滚动时导航智能定位

    本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论