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

这篇具有很好参考价值的文章主要介绍了微信小程序地图组件利用腾讯地图生成热力图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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,一定要加不然最后没呈现效果

 <map  subkey="xxxxxxxxxxxxxxx">

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

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

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

7.意外

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

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

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

第一次写文章样式什么的不太好看,愿谅解。文章来源地址https://www.toymoban.com/news/detail-496084.html

到了这里,关于微信小程序地图组件利用腾讯地图生成热力图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用腾讯地图

    第一步:登录或者注册腾讯地图官方(地址:https://lbs.qq.com/) 第二步:在创建sdk; 创建方法:进入控制面板后显示创建sdk,点击之后输入名称和选择应用场景后点击设置选择web和小程序后输入APPID后点击确定就好。 第二步:在微信小程序开发管理页面里面的域名管理里面输

    2024年02月04日
    浏览(49)
  • 微信小程序腾讯地图定位转高德地图定位

    微信小程序获取到了当前用户的定位,需要在高德地图上进行渲染。 发现正常渲染后,偏差几百米。 这里图方便,直接丢到window上了 这里演示“腾讯地图”转“高德地图”

    2024年01月25日
    浏览(59)
  • 微信小程序 --- 腾讯地图线路规划

    目录 微信小程序JavaScript 简介 Hello world! geocoder(options:Object) 微信小程序插件 简介 路线规划插件 入驻腾讯位置服务平台 申请开发者密钥(Key):申请秘钥 Key的作用与注意事项 微信公众平台绑定插件 方式一: 方式二: 方式三: 插件介绍 接入指引 相关参数说明 插件错误处

    2024年04月13日
    浏览(54)
  • 微信小程序引入腾讯地图图解

    一、准备工作 1.小程序 (qq.com)进入网址注册属于自己的小程序: 填写信息-登录邮箱激活-信息登记 2.完成后,就会进入这个页面 3.在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com 注意此处的开发者ID-小程序ID在下

    2024年02月03日
    浏览(36)
  • 微信小程序 - 腾讯地图SDK

    转自:https://github.com/qcomdd/qqmap-wx 微信小程序_腾讯地图SDK(在官方基础上增加路径规划功能) 以下为使用方法。 js文件中有大量注释。官方文档传送门 http://lbs.qq.com/qqmap_wx_jssdk/index.html 做一下简单的使用摘要 #简介# 腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘

    2024年02月16日
    浏览(37)
  • 微信小程序调用腾讯地图选点

    小程序中实现选择地址 1.在小程序后台的设置第三方设置在插件管理中添加插件搜索腾讯位置服务地图选点 2.插件引入后可以点击详情查看文档 (1)首先在app.json中添加插件 //app.json \\\"plugins\\\":{             \\\"chooseLocation\\\":{                 \\\"version\\\":\\\"1.0.9\\\",             

    2024年02月10日
    浏览(39)
  • 微信小程序内添加腾讯地图 导航

    1、微信小程序---》设置---》第三方设置-----》插件管理----》添加插件  如果搜索不到 腾讯位置服务路线规划插件,可搜索如下地址直接添加 腾讯位置服务路线规划 | 小程序插件 | 微信公众平台 问题:提示添加失败 项目主体不符的,可以通过  服务---》微信服务市场--》搜索

    2024年02月09日
    浏览(53)
  • 微信小程序使用腾讯地图完整流程

    前言:开发小程序需要得到定位和位置的省市区文字信息,看了所有的文章都没有一个完整和像样的,全是copy来,copy去的文章 - _ -!,一怒之下,开始了自己的踩坑之路 腾讯地图地址:腾讯位置服务 - 立足生态,连接未来 1.常规的申请账号登录 2.新建应用  3.点击添加key  

    2023年04月09日
    浏览(36)
  • uniapp微信小程序使用腾讯地图选点插件

    在A页面获取当前经纬度之后跳转至B页面打开腾讯地图选点插件 注意需要把微信开发者工具中的本地设置中的版本改为2.17.0,不然会报错 2.1使用腾讯地图 lbs.qq.com,控制台-应用管理-我的应用中,创建应用,并在相应的应用中创建Key。 注意勾选WebServiceAPI和微信小程序 web配置

    2024年02月09日
    浏览(35)
  • 微信小程序申请腾讯地图key(腾讯位置服务API)简要流程

    微信小程序使用腾讯地图完整流程 前往 腾讯位置服务官网 点击右上角 注册/登录 后 点击 控制台   应用管理 - 我的应用 - 创建应用 - 添加key 创建应用时信息随便填就行 Key名称 随便填一个 WebServiceAPI 要 勾选 域名白名单 ,否则一些功能会用不了(比如路线规划插件) ser

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包