微信小程序接入百度地图(微信小程序插件)使用文档

第一步配置域名

  1. :在微信公众平台登录后配置服务域名称:https://apis.map.qq.com

配置百度地图服务地址

第二步申请密钥

  1. 申请开发者密钥申请地址
    在这里插入图片描述
    我是根据当前id地址进行设置
    在这里插入图片描述

第三步使用插件

  1. 选择添加插件
    服务市场添加插件

  2. 搜索腾讯位置服务地图选点
    在这里插入图片描述

  3. 选择要授权的小程序
    在这里插入图片描述

  4. 授权完毕会在这里显示插件信息
    在这里插入图片描述

第四步查看使用文档

  1. 跳转至文档查看
    点击详情

  2. 跳转后点击开发文档
    在这里插入图片描述

  3. app.json中进行相关的配置

//引入插件包"plugins": {"chooseLocation": {"version": "1.0.10","provider": "wx76a9a06e5b4e693e"  //这里使用默认未修改}},
//设置定位授权"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位"}},
  1. 页面调用
    const key = ''//输入当前的keywx.getLocation({type: 'gcj02', //wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标success: res => {console.log(res);const {latitude,longitude} = resconst key = key; //使用在腾讯位置服务申请的keyconst referer = 'numberApp'; //调用插件的app的名称const location = JSON.stringify({latitude: latitude,longitude: longitude});const category = '生活服务,娱乐休闲';wx.navigateTo({url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`})},fail: error => {console.log(error);}})

第五步页面展示

  1. 点击上面方法跳转后会到地图页面
    在这里插入图片描述

2.点击搜索后会有模糊查询
在这里插入图片描述
在这里插入图片描述

  1. 地址选择完成后点击确认地点,会在当前页面的onShow中返回地点信息
const chooseLocation = requirePlugin('chooseLocation')
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
console.log(location);
if(that.data.locaStatus && location !== null) {if(that.data.locaStatus == 1) {that.setData({'userInfo.pcsqCfd': location.name})} else {let district = location.districtthat.setData({'userInfo.pcsqMdd': location.name})//我做的是输入用车起始地和目的地后判断用车范围const data = districtData.some(item=>item == district)if(!data) {setTimeout(()=>{wx.showToast({title: "用车超出范围,请重新选择",icon: 'none',duration: 2000});that.setData({'userInfo.pcsqMdd':""})},1000)}}}

在这里插入图片描述

在这里插入图片描述

附加配额使用

  1. 账户额度:对不同的接口进行额度分配
    在这里插入图片描述

  2. Key额度:可以查看今天的接口使用情况
    在这里插入图片描述

  3. 调用统计:统计今日的情况用曲线图展示
    在这里插入图片描述

说明:以上设置可在微信小程序中使用百度地图插件,自定义地图使用不包含

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

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

相关文章

【SQL】指定日期的产品价格(IFNULL函数)

题目描述 leetcode题目:指定日期的产品价格 思路 找出所有的产品的指定的日期的价格;若找不到某个产品的更改日期,则将该产品价格设置为10。 关键点: if没有16号的,怎么找到前一个日期的?> 日期小…

【前端开发】HTML1

HTML标签 HTML全称 Hypertext Markup Language &#xff08;超文本标记语言&#xff09; 通过一系列的标签来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。 双标签&#xff1a;拥有开始标签和结束标签&#xff0c;内容位于两者之间 <p>这是一个段落<…

Spring MVC AbstractHandlerMapping原理解析

在Spring MVC框架中&#xff0c;AbstractHandlerMapping是一个核心的组件&#xff0c;它负责将HTTP请求映射到相应的处理器&#xff08;Controller&#xff09;。这种映射基于请求的URL或其他条件进行。为了更好地理解Spring MVC的工作机制&#xff0c;本文将深入探讨AbstractH…

大数据运维面试1

1、OBS对象储存&#xff0c;hive不兼容怎么办&#xff1b; ①.确保OBS与Hive的集成 确认您的Hive版本是否支持与OBS集成。如果需要&#xff0c;您可能需要升级Hive或者使用特定的插件来实现集成。 ②.配置OBSFileSystem 使用OBSFileSystem插件&#xff08;OBSA-HDFS&…

HTML5- 拖拽功能

HTML5- 拖拽功能 ​ HTML5新增了拖拽功能&#xff0c;但不是所有元素都能拖拽&#xff0c;如果希望该元素强制可以被拖拽&#xff0c;加一个行内属性 draggable"true" 对应还提供了以下方法&#xff1a; dragstart 开始拖拽时触发 dragend 结束拖拽时触发给容器加…

Word中的文档网格线与行距问题

在使用Word编辑文档时&#xff0c;经常会发生以下动图展示的这种情况&#xff1a; 上面的动图里&#xff0c;将文字大小放大到某个字号时&#xff0c;单倍行距的间距突然增加很多。造成这种情况的原因是文档中定义了网格线&#xff0c;并且设置了对齐到网格线。如果取消文档中…

EdgeX Foundry 基本操作

文章目录 一、容器管理1.容器操作2.查看容器日志 二、EdgeX UI 操作1.访问 UI1.1. consul1.2. EdgeX Console 2.创建 MQTT 设备2.1.创建设备配置文件2.2.添加设备 3.设备配置文件3.1.配置文件管理3.2.修改配置文件 4.设备4.1.设备管理4.2.修改设备信息4.3.命令4.4.自动采集 5.设…

【GO】语言特点 | Go和Java的对比

while循环 go语言中没有while循环&#xff0c;一般都是用for循环替代 while (条件) {} // Java的for循环for true {} // go 语言中会用一个为真的表达式作为是否 会进入循环的条件&#xff0c;也就是把其他语言的for和while合并了for循环 for (Type item : list) {} // j…

mac版本的vscode如何运行html文件

1.安装Live Server扩展 需在VS中安装一个拓展插件Live Server&#xff0c;插件寻找方法如下&#xff1a; 2.编写HTML文件 3.启动Live Server 在VSCode中打开你的HTML文件&#xff0c;并点击右键选择"Open with Live Server"&#xff0c;或者点击右下角的"Go…

【MATLAB】 CEEMD信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 CEEMD信号分解算法 CEEMD 分解又叫互补集合经验模态分解&#xff0c;英文全称为 Complementary Ensemble Empirical Mode Decomposition。 CEEMD是对EEMD的改进&#xff0c;它在EEMD的基础上引入了一个…

转载)word输出高分辨PDF并且有链接跳转功能

直接用Adobe高质量打印会丢失超链接信息。 直接word会导致图片质量降低。 &#xff08;adobe PDFmaker插件在我电脑上搞不好&#xff0c;所以没试过&#xff09; 解决方法&#xff1a;adobeAutoBookmark

46、Numpy手推共空间模式CSP,用于脑电EEG信号分类

一、Numpy实现CSP公式及对应的代码 CSP全部流程&#xff1a; 1、CSP先将数据按照类别分类&#xff0c;两类数据可分为E1、E2 2、计算分类后的原始数据的协方差矩阵&#xff1a; 方差矩阵&#xff1a; C协方差矩阵&#xff0c;E原始EEG信号&#xff0c;trace求迹 实现代码&a…

政安晨【TypeScript高级用法】(四):模块与声明文件

TypeScript是一种静态类型的JavaScript超集语言&#xff0c;它支持模块化开发和声明文件。 模块化开发是一种将代码分割为独立的模块&#xff0c;每个模块只关注自己的功能&#xff0c;然后通过导入和导出来实现模块之间的交互和复用。在TypeScript中&#xff0c;可以使用impo…

短视频矩阵系统--抖去推---年后技术还能迭代更新开发运营吗?

短视频矩阵系统#短视频矩阵系统已经开发3年&#xff0c;年后这个市场还能继续搞吗&#xff1f;目前市面上开发短视频账号矩阵系统的源头公司已经不多了吧&#xff0c;或者说都已经被市场被官方平台的政策影响的不做了吧&#xff0c;做了3年多的矩阵系统开发到现在真的是心里没有…

Android 14后台服务永久保活的技术方法

Android 14后台服务永久保活的技术方法 在本篇博客中&#xff0c;我们将探讨如何创建一个在Android系统中不会被杀死的后台服务。 第一步&#xff1a;创建一个后台服务。 在这一步中&#xff0c;我们需要创建一个后台服务的代码。 第二步&#xff1a;在AndroidManifest.xml中…

光猫改为bridge模式

注意事项&#xff1a; 改成桥接模式后&#xff0c;光猫将不再拨号上网&#xff0c;建议提前记录自己的宽带账号&#xff0c;打10010申请修改自己的宽带密码。 光猫改好桥接之后&#xff0c;把宽带账号和密码输入到负责拨号上网的终端设备中&#xff0c;完成宽带PPPOE拨号设置。…

前端总复习

1.1HTML基础 HTML文档结构&#xff1a; 比如&#xff1a;<&#xff01;DOCTYPE html>、<html>、<head>、<body>等。 元素和标签&#xff1a; 比如&#xff1a;<div>、<span>、<a>等等及其属性 CSS样式&#xff1a; 行内样式、内部…

【从Python基础到深度学习】10. Python深层拷贝 和 浅层拷贝

对于浅层拷贝而言 不会发生拷贝的数据类型有&#xff1a;number、str、tuple 会发生拷贝的数据类型有&#xff1a;list、dict、set 对于不可变的数据类型&#xff0c;浅层拷贝时&#xff0c;不会发生拷贝&#xff0c;只是引用关系 对于可变数据类型&#…

YOLOv5创新改进:小目标涨点篇 | 一种新颖的轻量化网络,用于提升遥感图像中的小物体检测 | 2024年二区最新成果

💡💡💡本文独家改进:提出了三个创新的轻量级即插即用模块:特征增强模块(FEM)、特征融合模块(FFM)和空间上下文感知模块(SCAM),对标yolov5m,涨点的同时轻量化,GFLOPS从原始的47.9降低至37.6,MB从42.2降低至10.7 parametersGFLOPsMByolov5m2085293447.9

CSS极速入门

CSS介绍 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式. CSS能够对网页中元素位置的排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离. CSS可以理解为"东方四大邪术"的化妆术. 对页面展示进行化妆. 基本语法规…