正经学徒，佛系记录，不搞事情、理解腾讯地图

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

正经学徒，佛系记录，不搞事情、理解腾讯地图

认真拜师，佛录，勿扰

1.了解腾讯地图在小程序中的作用

如果你想在小程序上使用腾讯地图正经学徒，佛系记录，不搞事情、理解腾讯地图，你首先要了解腾讯地图是做什么的。

地图

地图。 该组件为原生组件，使用时请注意相关限制。 个性化地图能力可在小程序后台“设置-开发工具-腾讯位置服务”中申请激活。 设置后，小程序中所有地图组件都会使用该底图效果，后续版本将提供底图场景的切换。

首先我们来看看官方对原生地图的介绍。 陷阱从哪里开始？ 一切都是从不仔细阅读文档开始的。

以下是标注的一些关键词：

个性化地图设置 地图场景切换

由此可以得出结论：

腾讯地图只是在微信小程序原生地图的基础上使用，其功能只是辅助。 一是改变小程序地图的风格，二是为小程序地图提供数据，计算出腾讯地图官网想要选择的地图风格。 要生效，您需要设置小程序 目前不支持多风格切换。 2. 练习

1. 申请密钥

首先，您需要在腾讯地图官网注册一个密钥

地址：

万无一失申请后，即可立即获得腾讯地图钥匙。

腾讯地图支持免费申请密钥微信小程序开发工具使用，前提是不能商用，且使用量有限，每天10000次请求

这里有一个陷阱。 需要检查小程序的key。

否则使用时会报错。

2. 选择地图样式

这里我们以黑色层为例

3. 开放代码

官网有完整的示例代码，按照步骤复制即可

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

*终代码如下：

注意：必须写，否则样式无效

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'S2QBZ-LBERX-QGL4D-ZWMNS-4PHK2-BKFHF'
    });
    this.mapCtx = wx.createMapContext('myMap')
  }
})

设置全屏

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

*后，还有一个陷阱。 IDE工具目前不支持查看地图样式（官方文档中也有提到），需要使用手机才能查看。

点击预览生成二维码

*终结果：

微信小程序俱乐部

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等