微信小程序 --- 腾讯地图线路规划

news2024/10/6 12:32:17

目录

微信小程序JavaScript

简介

Hello world!

geocoder(options:Object)

微信小程序插件

简介

路线规划插件

入驻腾讯位置服务平台

申请开发者密钥(Key):申请秘钥

Key的作用与注意事项

微信公众平台绑定插件

方式一:

方式二:

方式三:

插件介绍

接入指引

相关参数说明

插件错误处理

效果图

 实战应用


微信小程序JavaScript

简介

        腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

Hello world!

  1. 申请开发者密钥(key):申请密钥

  2. 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

    (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

  3. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

  4. 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

geocoder(options:Object)

        提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

        注:坐标系采用gcj02坐标系

options属性说明

属性类型必填说明
addressString地址(注:地址中请包含城市名称,否则会影响解析效果),如:‘北京市海淀区彩和坊路海淀西大街74号’
regionString指定地址所属城市,如北京市
该参数适用于 jssdkv1.1 jssdkv1.2
sigString签名校验
开启WebServiceAPI签名校验的必传参数,只需要传入生成的SK字符串即可,不需要进行MD5加密操作
该参数适用于 jssdkv1.2

调用结果

        通过属性success, fail, complete的回调参数来接收调用结果

        success的回调参数可以有2个,第1个参数接收调用结果,第2个参数控制返回处理后的数据(非必须参数),示例:success:function(res,data)

        该属性适用于 jssdkv1.1 jssdkv1.2

名称类型必填说明
statusnumber状态码,0为正常,
310请求参数信息有误,
311Key格式错误,
306请求有护持信息请检查字符串,
110请求来源未被授权
messagestring状态说明,即对状态码status进行说明,
如:
status为0,message为"query ok",为正常,
status为310,message为"请求参数信息有误",
status为311,message为"key格式错误",
status为306,message为"请求有护持信息请检查字符串",
status为110,message为"请求来源未被授权"
resultobject地址解析结果
locationstring解析到的坐标
latnumber纬度
lngnumber经度
address_componentsobject解析后的地址部件
provincestring
citystring
districtstring区,可能为空字串
streetstring街道,可能为空字串
street_numberstring门牌,可能为空字串
similaritynumber查询字符串与查询结果的文本相似度
deviationnumber误差距离,单位:米, 该值取决于输入地址的精确度;
如address输入:海淀区北四环西路,因为地址所述范围比较大,因此会有千米级误差;
而如:银科大厦这类具体的地址,返回的坐标就会相对精确;
该值为 -1 时,说明输入地址为过于模糊,仅能精确到市区级。
reliabilitynumber可信度参考:值范围 1 低可信 - 10 高可信
我们根据用户输入地址的准确程度,在解析过程中,将解析结果的可信度(质量),由低到高,分为1 - 10级,该值>=7时,解析结果较为准确,<7时,会存各类不可靠因素,开发者可根据自己的实际使用场景,对于解析质量的实际要求,进行参考。

示例

WXML 模板文件中添加组件:

<!--地图容器-->
<!--longitude及latitude为设置为调转到指定地址位置,默认不显示-->
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}"
    scale='16' show-location>
</map>
<!--form表单-->
<form bindsubmit="formSubmit">
    <!--地址描述输入框,示例:北京市海淀区彩和坊路海淀西大街74号-->
    <input style="border:1px solid #000;" name="geocoder"></input>
    <!--提交表单数据-->
    <button form-type="submit">地址解析</button>
</form>
<!--地址描述经纬度展示-->
<view>地址纬度:{{poi.latitude}}</view>
<view>地址经度:{{poi.longitude}}</view>

Javascript 关键代码片段:

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
//在Page({})中使用下列代码
//触发表单提交事件,调用接口
formSubmit(e) {
    var _this = this;
    //调用地址解析接口
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: e.detail.value.geocoder, //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function(res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({ // 获取返回结果,放到markers及poi中,并在地图展示
          markers: [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: './resources/placeholder.png',//图标路径
            width: 20,
            height: 20,
            callout: { //可根据需求是否展示经纬度
              content: latitude + ',' + longitude,
              color: '#000',
              display: 'ALWAYS'
            }
          }],
          poi: { //根据自己data数据设置相应的地图中心坐标变量名称
            latitude: latitude,
            longitude: longitude
          }
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    })
}

微信小程序插件

简介

    完整的地图能力

        腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是您实现地图功能的极佳伙伴。 目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器四款插件产品,欢迎大家体验!

        路线规划:路线规划插件提供地图路线规划功能。根据起终点,智能规划驾车、公交、步行出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里,实现路线规划功能。

        地铁图:支持全国重点城市地铁线路静态展示、信息查询、线路检索及规划功能。

        地图选点:快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。同时我们还提供位置检索、关键词分类等辅助功能。

        城市选择器:可以让用户快速、准确地选择城市,并将城市信息回传给开发者。我们的插件提供单页模式和组件模式两种形式,并支持搜索和索引等功能。

地图插件的优势

  • 丰富插件市场

         丰富的地图插件产品,为开发者提供更多的选择,满足不同的应用场景。后续我们将继续扩展插件产品种类,敬请期待!

  • 节约开发成本

         插件本身具有强大的灵活性,无需开发者投入专业的人力研发,就可以拥有地图能力,缩减企业研发成本。

  • 专业的行业方案

         腾讯位置服务专注于地图能力,多年服务政企、美团、京东、滴滴等大客户的经验,锻造了更加专业的产品并提供更优秀的行业解决方案。

路线规划插件

 

入驻腾讯位置服务平台

    登陆腾讯位置服务官网 lbs.qq.com,支持QQ、微信、手机号注册账号。

    第一步,点击官网右上角“登陆”按钮。

    第二步,点击后页面有弹框:系统支持 微信、QQ、手机号登录,可以任选一种进行后续操作:

申请开发者密钥(Key):申请秘钥

   1. 官网控制台,点击左侧“应用管理”->“我的应用”->“创建应用”,在开发者密钥申请页面按要求填写申请信息

    

   2. Key创建成功后:控制台 ->应用管理-> 我的应用 -> 设置(使用该功能的key)-> 勾选“微信小程序” -> 填写“授权 APP ID” ->勾选“WebServiceAPI” ->保存。 需要注意的是如果填写了域名白名单,需要把“servicewechat.com”域名添加进域名白名单中,否则小程序下将无法正常使WebServiceAPI服务(如下图所示)

    

Key的作用与注意事项

Key用途

   Key 用于识别开发者身份、验证权限,并在某些情况下方便联系到您。不使用 Key 会导致您无法使用微信小程序插件。

Key使用限制

申请企业认证后,可以在控制台->配额申请中申请你需要的配额,我们将对您的申请进行评估并进行审批(3个工作日内),审批通过后将会获得您申请的配额。

若当前档位额度配额度仍不够用,可在控制台->配额管理中根据自己的业务需求购买调用量和并发量。各接口的配额上限参见配额限制说明。

地铁图插件

接口服务路径
地点搜索/ws/place/v1/search
关键词输入提示/ws/place/v1/suggestion
逆地址解析(位置描述)/ws/geocoder/v1

路线规划插件

接口服务路径
路线规划:驾车/ws/direction/v1/driving
路线规划:公交/ws/direction/v1/transit
路线规划:步行/ws/direction/v1/walking
地点搜索/ws/place/v1/search
关键词输入提示/ws/place/v1/suggestion
逆地址解析(位置描述)/ws/geocoder/v1

地图选点插件

接口服务路径
地点搜索/ws/place/v1/search
关键词输入提示/ws/place/v1/suggestion
周边推荐/ws/place/v1/explore

城市选择器插件

接口服务路径
行政区划/ws/district/v1/list
逆地址解析(位置描述)/ws/geocoder/v1
ip定位/ws/location/v1/ip

微信公众平台绑定插件

方式一:

   1. 注册微信小程序 -> 开通插件功能(开通入口:小程序管理后台-小程序插件)

   2. 小程序管理后台添加插件:小程序管理后台-设置-第三方设置-插件管理,右侧点击“添加插件”。根据AppID查找需要的插件,并申请使用。 更多微信小程序开发相关文档请浏览,微信官方文档
      开放范围:小程序使用的插件,其插件类目不能超过小程序主体类型当前开放的范围,具体见开放的服务类目表。

    

    

方式二:

      若通过上述方式,在微信平台搜索不到插件可以通过第二种方式在开发者工具直接引入,步骤如下:
       1)打开调试控制台,并直接向app.json添加需要使用的插件并保存(城市选择器插件接入指引),如需使用其他插件,请参考其他指引

    

       2) 调试控制台提示插件未授权使用,点击添加插件

    

       3) 会弹出添加弹框,点击添加并收到添加成功提示即可

    

      

方式三:

      若通过上述方式都未能成功,可以通过方式三添加:
      页面位置:小程序管理后台-设置-第三方设置
      1、点击服务市场
      


      2、按下图所示找到需要的插件
      


      3、点击需要的插件,进入详情页点击添加插件
      


      4、选择需要授权的小程序
      


      


      

插件介绍

        腾讯位置服务路线规划插件 提供路线规划等功能,根据起终点,多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里,实现路线规划功能。

        请扫描二维码,在手机端体验路线规划插件Demo。

接入指引

        1、插件申请接入:

        在腾讯微信公众平台中, “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”,搜索 “腾讯位置服务路线规划” 申请,申请后小程序开发者可在小程序内使用该插件。

        2、引入插件包: 路线规划appId: wx50b5593e81dd937a (点击浏览插件最新版本)

// app.json
{
    "plugins": {
        "routePlan": {
        "version": "1.0.18",
        "provider": "wx50b5593e81dd937a"
        }
    }
} 

        3、设置定位授权:

        路线规划插件需要小程序提供定位授权才能够正常使用定位功能:

// app.json
{
    "permission": {
        "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
        }
    }
}

        4、使用插件:

        插件页面调用示例:

let plugin = requirePlugin('routePlan');
let key = '';  //使用在腾讯位置服务申请的key
let referer = '';   //调用插件的app的名称
let endPoint = JSON.stringify({  //终点
    'name': '吉野家(北京西站北口店)',
    'latitude': 39.89631551,
    'longitude': 116.323459711
});
wx.navigateTo({
    url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

相关参数说明

        插件页面参数

属性类型说明是否必须传入
keystring调用路线规划插件需要申请腾讯位置服务的服务账号,key是开发者的唯一标识。申请key
refererstring调用来源,一般为您的应用名称,请务必填写!
endPointstring终点
startPointstring起点, 如果不传起点参数,则起点默认当前用户的真实定位
modestring默认出行规划方式,目前支持三种方式:driving(驾车)、transit(公交)、walking(步行),不传则默认发起驾车规划
navigationnumber值为1时,开启驾车导航功能;默认不开启此功能
themeColorstring插件主题色,16进制色值,默认是#427CFF

        startPoint, endPoint 说明

属性类型说明是否必须传入
namestring位置名称
latitudenumber纬度
longitudenumber经度

插件错误处理

     插件页面传递参数错误处理说明:

  • 当必传参数没有传时,插件页面内容不展示
  • 当经纬度超出正确范围时,插件页面内容不展示

     页面错误码列表:

错误码含义
-1000网络请求失败
-1001起终点参数错误
-1002定位失败
-1003定位授权失败

效果图

 实战应用

只展示页面使用 请按照上文提示 接入微信小程序插件以及导入 sdk

    let QQMapWX = require("../../../utils/qqmap-wx-jssdk.min");
    let plugin = requirePlugin("routePlan");
    // 实例化API核心类
    let qqmapsdk = new QQMapWX({
      key: " ", // 必填
    });
  // 获取经纬度
  getAddressIp() {
    return new Promise((resolve, reject) => {
      let { data } = this.data;
      if (!qqmapsdk) {
        reject({
          message: "地图初始化失败",
        });
      }
      if (!data.shopAddress) {
        reject({
          message: "暂无详细地址",
        });
      }

      //调用地址解析接口
      qqmapsdk.geocoder({
        //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号'
        address: data.shopAddress,
        success: (res) => {
          //成功后的回调
          resolve(res);
        },
        fail: (error) => {
          reject(error);
        },
      });
    });
  },
  // 导航商户位置
  async goMap() {
    try {
      let { data } = this.data;
      let { message, status, result } = await this.getAddressIp();
      if (status != 0) {
        this.showToast("获取地址接口:" + message || "获取经纬度失败");
        return;
      }
      console.log(result, "地址详情====");
      const key = ""; //使用在腾讯位置服务申请的key
      const referer = ""; //调用插件的app的名称
      let endPoint = JSON.stringify({
        //终点
        name: data.shopAddress,
        latitude: result.location.latitude,
        longitude: result.location.longitude,
      });
      wx.navigateTo({
        url:
          "plugin://routePlan/index?key=" +
          key +
          "&referer=" +
          referer +
          "&endPoint=" +
          endPoint,
      });
    } catch (error) {
      console.log(error);
      this.showToast("获取地址接口:" + error.message || "获取经纬度失败");
    }
  },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新型IT运维管理,基础设施和数据两手都要硬

编前语&#xff1a;数据是AI的基石&#xff0c;缺数据无AI。 AI大模型时代&#xff0c;数据赋予IT人“新使命” 当下IT人在企业中扮演着运营支撑的角色。说到运维管理&#xff0c;相信每人都是一把辛酸泪&#xff0c;每天承担着繁琐、高负荷且又高风险的运维工作&#xff0c;但…

开源软件全景解析:驱动技术创新与行业革新的力量

目录 什么是开源 开源的核心 开源软件的特点 为什么程序员应该拥抱开源 1.学习机会&#xff1a; 2.社区支持&#xff1a; 3.提高职业竞争力&#xff1a; 4.加速开发过程&#xff1a; 5.贡献和回馈&#xff1a; 开源软件的影响力 开源软件多元分析&#xff1a; 开源…

机器学习中常用的性能度量—— ROC 和 AUC

什么是泛化能力&#xff1f; 通常我们用泛化能力来评判一个模型的好坏&#xff0c;通俗的说&#xff0c;泛化能力是指一个机器学期算法对新样本&#xff08;即模型没有见过的样本&#xff09;的举一反三的能力&#xff0c;也就是学以致用的能力。 举个例子&#xff0c;高三的…

为什么说TiDB在线扩容对业务几乎没有影响

作者&#xff1a; 数据源的TiDB学习之路 原文来源&#xff1a; https://tidb.net/blog/e82b2c5f 当前的数据库种类繁多&#xff0c;墨天轮当前统计的所有国产数据库已经有 290个 &#xff0c;其中属于关系型数据库的有 166个 。关系型数据库从部署架构上又可以分为集中式…

AI克隆自己的声音只需5秒,MockingBird实现AI克隆声音!

一、环境搭建 搭建Anaconda运行环境 搭建Anaconda运行环境请跳转链接查看https://blog.csdn.net/m0_50269929/article/details/136036402安装pytorch pip3 install torch torchvision torchaudio安装ffmpeg 打开官网 https://ffmpeg.org/download.html#get-packages 下载地址…

Python实现PDF到HTML的转换

PDF文件是共享和分发文档的常用选择&#xff0c;但提取和再利用PDF文件中的内容可能会非常麻烦。而利用Python将PDF文件转换为HTML是解决此问题的理想方案之一&#xff0c;这样做可以增强文档可访问性&#xff0c;使文档可搜索&#xff0c;同时增强文档在不同场景中的实用性。此…

InnoDB 锁系统(小白入门)

1995年 &#xff0c;MySQL 1.0发布&#xff0c;仅供内部使用&#xff01; 开发多用户、数据库驱动的应用时&#xff0c;最大的一个难点是&#xff1a;一方面要最大程度地利用数据库的并发访问&#xff0c;另一方面还要确保每个用户能以一致性的方式读取和修改数据。 MVCC 并发…

list基本使用

list基本使用 构造迭代器容量访问修改 list容器底层是带头双向链表结构&#xff0c;可以在常数范围内在任意位置进行输入和删除&#xff0c;但不支持任意位置的随机访问&#xff08;如不支持[ ]下标访问&#xff09;&#xff0c;下面介绍list容器的基本使用接口。 template <…

CSS-IN-JS

CSS-IN-JS 为什么会有CSS-IN-JS CSS-IN-JS是web项目中将CSS代码捆绑在JavaScript代码中的解决方案。 这种方案旨在解决CSS的局限性&#xff0c;例如缺乏动态功能&#xff0c;作用域和可移植性。 CSS-IN-JS介绍 1&#xff1a;CSS-IN-JS方案的优点&#xff1a; 让css代码拥…

探索数据可视化:Matplotlib在Python中的高效应用

探索数据可视化&#xff1a;Matplotlib在Python中的高效应用 引言Matplotlib基础安装和配置Matplotlib基础概念绘制简单图表线形图散点图柱状图 图表定制和美化修改颜色、线型和标记添加标题、图例和标签使用样式表和自定义样式 高级图表类型绘制高级图表多图布局和复杂布局交互…

ES6中新增Array.of()函数的用法详解

new Array()方法 ES6为Array增加了of函数用一种明确的含义将一个或多个值转换成数组。因为用new Array()构造数组的时候&#xff0c;是有二意性的。 构造时&#xff0c;传一个参数&#xff0c;实际上是指定数组的长度&#xff0c;表示生成多大的数组。 构造时&#xff0c;传…

SpringbootV2.6整合Knife4j 3.0.3 问题记录

参考 https://juejin.cn/post/7249173717749940284 近期由于升级到springboot2.6X&#xff0c;所以服务端很多组件都需要重新导入以及解决依赖问题。 下面就是一个很经典的问题了&#xff0c; springboot2.6与knife4j的整合。 版本对应 springboot2.6与knife4j 3.0.3 坑 …

CSRF:跨站请求伪造攻击

目录 什么是CSRF&#xff1f; DVWA中的CSRF low medium hight impossible 防御CSRF 1、验证码 2、referer校验 3、cookie的Samesite属性 4、Anti-CSRF-Token 什么是CSRF&#xff1f; CSRF全称为跨站请求伪造&#xff08;Cross-site request forgery&#xff09;&…

【学网攻】 第(20)节 -- 网络端口地址转换NAPT配置

系列文章目录 目录 系列文章目录 文章目录 前言 一、NAPT是什么&#xff1f; 二、实验 1.引入 实验目的 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第…

AIGC实战——归一化流模型(Normalizing Flow Model)

AIGC实战——归一化流模型 0. 前言1. 归一化流模型1.1 归一化流模型基本原理1.2 变量变换1.3 雅可比行列式1.4 变量变换方程 2. RealNVP2.1 Two Moons 数据集2.2 耦合层2.3 通过耦合层传递数据2.4 堆叠耦合层2.5 训练 RealNVP 模型 3. RealNVP 模型分析4. 其他归一化流模型4.1 …

计算机网络——新型网络架构:SDN/NFV

1. 传统节点与SDN节点 1.1 传统节点(Traditional Node) 这幅图展示了传统网络节点的结构。在这种设置中&#xff0c;控制层和数据层是集成在同一个设备内。 以太网交换机&#xff1a;在传统网络中&#xff0c;交换机包括控制层和数据层&#xff0c;它不仅负责数据包的传输&…

FANUC机器人如何清除示教器右上角的白色感叹号?

FANUC机器人如何清除示教器右上角的白色感叹号&#xff1f; 如下图所示&#xff0c;示教器上显示白色的感叹号&#xff0c;如何清除呢&#xff1f; 具体可参考以下步骤&#xff1a; 按下示教器上白色的“i”键&#xff0c;如下图所示&#xff0c; 如下图所示&#xff0c;按…

飞天使-linux操作的一些技巧与知识点6-node,npm与jenkins执行用户

文章目录 安装node,npmjenkins执行时候出现找不到npm 命令 安装node,npm 以下是在 CentOS 7.9 上使用 nvm 安装 Node.js 的步骤&#xff1a;安装 nvm&#xff1a;bashCopy Codecurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash在终端中重新加…

Java 运用 StringJoiner 高效的拼接字符串

运用 StringJoiner 高效的拼接字符串 package com.zhong.stringdemo;import java.util.ArrayList; import java.util.StringJoiner;public class Test {public static void main(String[] args) {ArrayList<String> s new ArrayList<>();s.add("11");s.…

备战蓝桥杯---搜索(剪枝)

何为剪枝&#xff0c;就是减少搜索树的大小。 它有什么作用呢&#xff1f; 1.改变搜索顺序。 2.最优化剪枝。 3.可行性剪枝。 首先&#xff0c;单纯的广搜是无法实现的&#xff0c;因为它存在来回跳的情况来拖时间。 于是我们可以用DFS&#xff0c;那我们如何剪枝呢&#…