微信小程序手把手接入腾讯地图

  • • 发表于 4个月前
  • • 作者 toBeMN
  • • 1038 人浏览
  • • 0 条评论
  • • 最后编辑时间 4个月前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

一、理解腾讯地图于小程序的作用

要想在小程序上使用腾讯地图,就要先去理解腾讯地图是在做什么

map
地图。该组件是原生组件,使用时请注意相关限制。 个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通。 设置subkey后,小程序内的地图组件均会使用该底图效果,底图场景的切换会在后续版本提供。

首先来看一下官方对原生地图map的介绍,坑从何而起,坑从不认真看文档开始
这里标注了几个重点词汇:

  1. 个性化地图
  2. 设置subkey
  3. 地图场景切换

由此可以得出结论:

  1. 腾讯地图只是在微信小程序原生地图的基础上使用的,其作用只是辅助,一是更改小程序地图的样式,二是为小程序地图提供数据计算
  2. 想要自己在腾讯地图官网上选中的地图样式能够生效,需要设置subkey
  3. 小程序目前不支持多样式切换

二、实践

1. 申请密钥key

首先要在腾讯地图官网注册一个key
地址:https://lbs.qq.com/console/user_info.html

一路傻瓜式申请下来,可以马上得到一个腾讯地图的密钥key
腾讯地图支持免费申请key,前提是不能商用,且用量有限制,每日万次请求
这里有一个坑点,小程序的key需要勾选

否则在使用的时候会报错

2. 选择地图样式


这里以黑色图层为例

3. 开码

官网有完整的实例代码,照步骤拷贝 https://lbs.qq.com/qqmap_wx_jssdk/index.html

调试前需要去微信小程序后台设置域名,如下

最终代码如下:
注:subkey一定要写,否则样式无效

<map id="myMap" class="maMap" subkey="xxxx-xxxx-xxxx-xxxx-xxxx-xxxx"/>
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx'
    });
    this.mapCtx = wx.createMapContext('myMap')
  }
})

设置全屏

page {
  height: 100%;
  width: 100%;
}
.maMap{
  height: 100%;
  width: 100%;
}

最后还有一个坑,IDE工具当前不支持查看地图样式(官方文档中也有提到),需要用手机查看
点击预览生成二维码

最终结果:

分享到:
评论区(共0条评论)
0条评论
Ctrl+Enter
作者

toBeMN

toBeMN

APP:3 帖子:24 回复:59 积分:3193

已加入社区[990]天

梦想成为全栈的男人

作者详情》
Top