乐趣区

关于javascript:vue-集成腾讯地图基础api-Demo集合

jiezi

vue 集成腾讯地图根底 api Demo 汇合(根底地图引入与展现模块, 地址逆解析，3D/2D 切换，位置服务，mark 标记)

写作背景

官方网站的 demo 大部分都是原生 js，较根底，很多高级 Api 散布比拟扩散，为了有利于开发者查找，应用 vue 联合网上的开源框架 vue-admin 参照官方网站 demo，做一个开箱即用的 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', '腾讯地图模板 - 博客展现')

书到此地，大部分道友应该间接复制粘贴就能够完满的跑起腾讯地图了。

更新：如何退出地位逆解析服务

调用此服务必须领有开发者账号并申请属于本人的 key，点击这条连贯注册腾讯地图开发者账号，获取 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 参数请参照 官网文档

原文作者：咱们得站着 原文链接：https://blog.csdn.net/xiaoyao…

退出移动版