微信小程序地图组件利用腾讯地图生成热力图

由于找遍全网都没有使用过腾讯地图热力图接口的，所以我是靠自己一个个尝试的，所有尝试了很多步骤才做出来，所以很多步骤可能多于，但是我也不知道拿几个步骤才是真正实现热力图的，所以全部都写出来，如果大家有补充的可以在评论区发言。本人水平不足，很多地方考虑不到，文章也不怎么会写，但希望能通过文章帮到你！

1. 申请密钥key

首先要在腾讯地图官网注册一个key
地址：腾讯位置服务 - 立足生态，连接未来

我是勾选了WebServiceAPI SDK 微信小程序三个选项然后创建了一个key

这个key在后面要用到很多地方

2.点击下面的图层编辑

我选的是标准热力图

点击下面那个下载数据模板，就会给你一个longitude、latitude、weight的xlsx 然后填完导入进去就好，进入就可以编辑各种东西了，如下图所示：

然后发布一下

然后就会跳转到图层绑定页面：

输入一下小程序appID 然后绑定一下图层提交即可

3.然后点数据管理的我的数据

设置一下数据权限

绑定你的key

4.然后进入这个网站

地址：控制台文档 | 腾讯位置服务 (qq.com)

发布一下自己的图层

就是调用这个URL

https://apis.map.qq.com/data_layer/v1/publish?key=xxxxxxxx&layerid=xxxxxxxxxxxx

传入自己的key和layerid 这里的layerid的i是小写后面小程序里是大写！

这一步执行完图层就应该可以被小程序访问了

5.微信公众平台小程序开发管理里设置一下request合法域名如下

6.打开自己的小程序

首先在自己的小程序map组件里设置一下key，一定要加不然最后没呈现效果

然后调用一下微信小程序自带的添加可视化图层的api，地址如下：

MapContext.addVisualLayer(Object object) | 微信开放文档 (qq.com)

然后传入你的图层id就可以呈现了，这里传的图层id，属性是layerId，和上面不一样，提醒一下

7.意外

当然我没有这么轻松实现，因为这个图层和MapContext.addGroundOverlay添加的图层是有冲突的，MapContext.addGroundOverlay添加的图层会比MapContext.addVisualLayer(Object object)添加的图层慢调用，尽管语句上Layer比Overlay靠后，Overlay还是先执行，然后覆盖了热力图导致没显示，我最后是在Overlay的回调函数里再调用MapContext.addGroundOverlay，这样就保证热力图在最上面了。

小程序上实现的效果和腾讯地图上差异还是有的，不过也没啥关系

接口也是不久前才出，网上都没有相应教程，腾讯地图的官方文档只告诉你调用MapContext.addGroundOverlay。。。摸索了好久，我在自己的小程序上能实现，体验版和真机调试都行，如果有其他补充的地方欢迎大家一起完善！！！！！！！

第一次写文章样式什么的不太好看，愿谅解。

微信小程序地图组件利用腾讯地图生成热力图相关推荐

微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序实时定位（腾讯地图）
微信小程序实时获取地理位置-腾讯地图微信小程序-获取当前城市位置: 一. 我用的腾讯定位服务 https://lbs.qq.com/ 打开之后点击控制台 2.我们创建自己的密匙key 3.下载微信小 ...
微信小程序开发：集成腾讯地图的步骤
在微信小程序开发的时候,会避免不了的使用腾讯送的大礼包,从微信支付到腾讯地图,一条龙的服务,不得不说鹅厂的实力,但是话又说回来了,鹅厂的官方API真是不敢恭维,尤其是微信小程序开发文档,如果不熟悉的话 ...
微信小程序中开发使用腾讯地图定位
在最近的微信小程序中开发使用到腾讯地图定位,开发记录一下相关的情况.首先地图使用的是腾讯地图接口,https://lbs.qq.com/ 上去注册,注册了后去创建APPID和应用名; 注意创建了应用后 ...
微信小程序video组件调用腾讯视频的解析
1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我加粗的是视频的vid 2.我们把vid放到接口 ...
微信小程序调用高德，腾讯地图app
在微信小程序中出现商家位置需要导航,只要直接调用微信小程序api wx.openLocation({latitude: lat, longitude: lon, scale: 16, name: ad ...
微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了微信小程序中接入使用腾讯地图插件详细教程,并提供了基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...

微信小程序地图组件利用腾讯地图生成热力图

微信小程序地图组件利用腾讯地图生成热力图相关推荐

最新文章

热门文章