微信小程序地图开发总结-规划路线

这是我做出来的自动规划效果,比较潦草 功能勉勉强强算是实现了的

在微信小程序中使用腾讯地图服务

  虽然map组件使我们可以很方便的使用地图,但是map组件只提供了最基本的地图显示功能,同时,微信小程序提供的关于地图的API也只是提供了一些简单的功能,在实际中无法满足我们的各种需求,如果需要使用到路线规划,距离计算等功能,我们可以在微信小程序中接入腾讯地图,高德地图,百度地图等服务,再结合map组件,去实现我们需要的功能

  下面以腾讯地图为例来介绍如何在微信小程序中使用腾讯地图服务

1、密钥的申请以及域名的设置

  在微信小程序中使用腾讯地图服务大致需要进行如下几个过程:

  (1)申请开发者密钥

    

    这里需要填写Key的名称,名称可以根据实际项目应用来命名,申请成功后,会生成一串开发者密钥

  (2)开通webserviceAPI服务

    a、点击右上角的控制台

    b、选择key管理

    c、进入设置,勾选webserviceAPI,点击保存

  (3)域名的配置

    上面的两个步骤都是在腾讯位置服务平台上进行的操作,要进行域名的配置,还需要登录微信公众平台进行域名的配置

    在开发小程序时,我们都会使用自己的APPID进行开发,只有配置了相关的域名,在请求时才能向指定的域名发送请求

    在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

  (4)下载微信小程序JavaScriptSDK

  如果完成了上面几个步骤,我们就可以在微信小程序中使用腾讯地图服务啦,在微信小程序中新建一个项目,写入APPID,记得这个APPID需要在微信公众平台中进行了域名的配置,不然会报错

2、实现路线规划

  下面举一个简单的小例子,给定起点和终点经纬度,计算出起点和终点之间的路线

  首先,需要引入我们刚才下载的JavaScriptSDK

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

进行API核心类的实例化

// 实例化API核心类
var qqmapsdk = new QQMapWX({key: '开发密钥(key)' // 必填
});

 

 接着,我们需要通过调用路线规划的接口direction获取路线,direction接口可以提供驾车、骑行、步行、公交等路线规划功能

  direction接口传入的参数如下

  (1)mode

    String,路线规划选择,可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行)、'transit'(公交),默认:'driving'

  (2)from

    String格式:lat<纬度>,lng<经度>(例:from: '39.984060,116.307520')

    Object格式:{latitude: 纬度,longitude: 经度}(例:from: { latitude: 39.984060,longitude: 116.307520})

  (3)to

    String格式:lat<纬度>,lng<经度>(例:location: '39.984060,116.307520')

    Object格式:{latitude: 纬度,longitude: 经度}(例:to: { latitude: 39.984060,longitude: 116.307520})

  下面给一个根据起点和终点实现路线规划的例子

<!--wxml-->
<map id="myMap" style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location></map><!--js-->
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');// 实例化API核心类
var qqmapsdk = new QQMapWX({key: '开发密钥(key)' // 必填
});
Page({data: {srcLat: '起点经度',srcLng: '起点纬度',dstLat: '终点经度',dstLng: '起点纬度',latitude: '',longitude: ''},onLoad() {var _this = this;//调用距离计算接口qqmapsdk.direction({mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填//from参数不填默认当前地址from: {latitude: _this.data.srcLat,longitude: _this.data.srcLng},to: {latitude: _this.data.dstLat,longitude: _this.data.dstLng}, success: function (res) {console.log(res);var ret = res;var coors = ret.result.routes[0].polyline, pl = [];//坐标解压(返回的点串坐标,通过前向差分进行压缩)var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({ latitude: coors[i], longitude: coors[i + 1] })}console.log(pl)//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点_this.setData({latitude:pl[0].latitude,longitude:pl[0].longitude,polyline: [{points: pl,color: '#FF0000DD',width: 4}]})},fail: function (error) {console.error(error);},complete: function (res) {console.log(res);}});}
})    

这是从这个大佬的网站学到的知识点,快做笔记!还有好多细节方面的东西等待我们去学习!https://www.cnblogs.com/Yellow-ice/p/11133283.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/615278.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.汉诺塔问题

C力扣 汉诺塔 class Solution { public:void hanota(vector<int>& a, vector<int>& b, vector<int>& c) {dfs(a,b,c,a.size());}void dfs(vector<int>& a, vector<int>& b, vector<int>& c,int n){if(n1){c.push…

CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)

前言&#xff1a;在我们学习完了html之后&#xff0c;我们就要开始学习三大件中的第二件—CSS&#xff0c;CSS 可以控制多重网页的样式和布局&#xff0c;也就是将我们写好的html代码加上一层华丽的衣裳&#xff0c;使网页变得更加精美。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨…

软考中级--网络工程师-计算机基础与理论第二节无线基础知识

IEEE802.11 规定了多种 WLAN 通信标准&#xff0c;其中&#xff08; &#xff09;与其他标准采用的频段不同&#xff0c;因而不能兼容。 A IEEE802.11a B IEEE802.11b C IEEE802.11g D IEEE802.11n 试题答案 正确答案&#xff1a; A 答案解析 IEEE 802.11a规定采用5GHz的 ISM频…

多态——C++

这里写目录标题 衔接继承总结继承和组合白箱复用黑箱复用 多态的概念多态的定义以及实现虚函数重写的两个例外协变面试题析构函数的重写 finalvoerride重载隐藏(重定义)重写(覆盖)抽象类什么是抽象类&#xff1f; 实现继承和接口继承多态的原理虚函数表 那多态的调用是怎么实现…

2024年mathorcup数学建模思路及论文助攻

题目C题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图1是一个简化的物流网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同流向进行分拣并发往下一个场地&#xff0c;最终使包裹到达消费者…

崩溃了news.163.com(求解)

崩溃了news.163.com&#xff08;求解&#xff09; 今天在测试学习的BeautifulSoup的时候&#xff0c;找到了news.163.com网易云新闻网&#xff0c;发现它的内容是加载在html里的&#xff0c;再尝试使用bs4获取下面这部分内容的时候。 分析过程&#xff1a; ​ 1.第一次怀疑自…

使用Postman创建Mock Server

这篇文章将教会大家如何利用 Postman&#xff0c;通过 Mock 的方式测试我们的 API。 什么是 Mock Mock 是一项特殊的测试技巧&#xff0c;可以在没有依赖项的情况下进行单元测试。通常情况下&#xff0c;Mock 与其他方法的主要区别就是&#xff0c;用于取代代码依赖项的模拟对…

【开发篇】十三、JVM基础参数设置与垃圾回收器的选择

文章目录 1、-Xmx 和 –Xms2、-XX:MaxMetaspaceSize 和 –XX:MetaspaceSize3、-Xss4、不建议改的参数5、其他参数6、选择GC回收器的调试思路7、CMS的并发模式失败现象的解决8、调优案例 GC问题解决方式&#xff1a; 优化JVM基础参数&#xff0c;避免频繁Full GC减少对象的产生…

ifconfig用法 、默认掩码

文章目录 概述2. ifconfig(尽量别用&#xff0c;已废弃)2.1 配置地址2.1.1 默认掩码 2.2 查看功能2.2.1 ifconfig 查看不含禁用的网卡2.2.2 ifconfig -a 查看含禁用的网卡2.2.3 ip a 2.3 启用、禁用网卡2.3.1 ifconfig eth1 up、 ifconfig eth1 down2.3.2 ifdown eth0、ifip et…

UTONMOS元宇宙游戏特点

在元宇宙的世界里&#xff0c;游戏不再只是一种娱乐方式&#xff0c;而是一种全新的生活体验。UTONMOS元宇宙游戏带你穿越虚拟与现实的边界&#xff0c;开启一段前所未有的冒险之旅。 在这个充满无限可能的UTONMOS元宇宙游戏中&#xff0c;你将成为自己游戏世界的主角。可以自…

图机器学习导论

图&#xff1a;描述关系数据的通用语言&#xff0c;起源于哥尼斯堡七桥问题 传统的机器学习&#xff1a;数据样本之间独立同分布&#xff0c;简单拟合数据边界&#xff0c;在传统的机器学习中&#xff0c;每个数据样本彼此无关。传统的神经网络&#xff0c;只能处理简单的表格、…

dinov2爆肝记

一、网址 https://github.com/facebookresearch/dinov2 二、配置 pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/ 三、雷 cuml-cu11无法安装&#xff0c;因为他只能linux 但我发现&#xff0c;没他也行 四、代码 注意&#xff1a; 下面代码…