微信小程序地图应用总结版

news/2024/7/20 3:27:05 标签: 微信小程序, 小程序

1.应用场景:展示公司位置,并打开第三方app(高德,腾讯)导航到目标位置。

(1)展示位置地图

uniapp官网提供了相关组件,uniapp-map组件

具体用法:

html结构

<map style="width: 100%; height: 300px;" :latitude="startposition.lat" :longitude="startposition.lng" :markers="covers" @markertap="openMap" @tap="openMap">
</map>

 data数据

              
				startposition: {
					lat: 32.631379,//维度
					lng: 116.833490,//经度
				},
				covers: [{
					id: 1,
					latitude: 32.631379,
					longitude: 116.833490,
					iconPath: "../../static/位置.png",
					width: '50rpx',
					height: '50rpx',
					label: {
						content: '位置',
						color: '#fff',
						fontSize: 12,
						borderRadius: 5,
						padding: 5,
						textAlign: 'center',
						bgColor: '#2979ff',
					},
				}],
				address:'定位中.....'

 (2)打开第三方软件

 js方法uni.openLocation()用于唤起第三方软件(真机测试有效)

			// 打开的点击事件, 传经纬度和地点名
			openMap() {
				// 打开第三方 (小程序)
				uni.openLocation({
					latitude: Number(this.startposition.lat),
					longitude: Number(this.startposition.lng),
					success: function() {
						console.log('success');
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},

2.应用场景:软件初始定位

 uniapp提供的apiuni.getLocation(OBJECT)在微信端只能获取到经纬度,无法获取到详细中文地址,所以官方推荐使用第三方库,这里我使用的是腾讯地图,简单方便。

(1)注册腾讯地图,申请key

打开小程序>微信小程序JavaScript SDK地址,更具官网教程注册

 (2)实现初始化当前定位信息

html部分

<view>当前位置:{{address}}</view>

data数据

address:'定位中.....'

 函数部分

        import QQMapWX from '../tx/qqmap-wx-jssdk.js';
		onLoad() {
			
			// 实例化API核心类
			let qqmapsdk = new QQMapWX({
				key: '你自己获取到的KEY'
			});
			qqmapsdk.reverseGeocoder({
				success: (res)=> {
					console.log(res);
					this.address=res.result.address
				}
			})
		},

注意import引入的路径为你下载的js文件路径

3.当前定位不准确或者需要重新选择定位位置,如改变收获地址等...

 实现该功能异常简单,直接使用uniapp提供的方法uni.chooseLocation(OBJECT)

实例代码:

uni.chooseLocation({
	success: function (res) {
		console.log('位置名称:' + res.name);
		console.log('详细地址:' + res.address);
		console.log('纬度:' + res.latitude);
		console.log('经度:' + res.longitude);
	}
});

4.开启定位需要的配置

manifest.json需要在mp-weixi中添加代码

		"permission": {
			"scope.userLocation": {
				"desc": "位置信息效果展示"
			}
		},
		"requiredPrivateInfos": ["chooseLocation", "getLocation"]

 也可以在配置中更改


http://www.niftyadmin.cn/n/4995230.html

相关文章

业绩走低,毛利率下滑,海外市场能否成为极米科技救命稻草?

撰稿|行星 来源|贝多财经 8月30日&#xff0c;成都极米科技股份有限公司&#xff08;SH:688696&#xff0c;下称“极米科技”&#xff09;发布2023年半年度业绩报告。财报显示&#xff0c;极米科技2023年上半年的业绩出现了大幅下滑&#xff0c;其中收入同比减少两成&#xf…

python如何求两字典的公共区域

如何求两字典的公共区域 要计算两个字典的公共部分&#xff0c;你可以使用字典的交集操作。在Python中&#xff0c;你可以使用&操作符来获取两个字典的交集。以下是一个示例函数&#xff1a; def common_keys(dict1, dict2):# 使用字典的交集操作来获取公共键common_keys…

【OpenCV入门】第七部分——图像的几何变换

文章结构 缩放dsize参数实现缩放fx参数和fy参数实现缩放 翻转仿射变换平移旋转倾斜 透视cmath模块 缩放 通过resize()方法可以随意更改图像的大小比例&#xff1a; dst cv2.resize(src, dsize, fx, fy, interpolation)src&#xff1a; 原始图像dsize&#xff1a; 输出图像的…

nvidia-smi nvcc -V 及 CUDA、cuDNN 安装

nvidia-smi nvcc -V 及 CUDA、cuDNN 安装 1. 问题缘由2. 分析3. CUDA Driver API 安装3.1 Software & Updates3.2 官网下载 4. CUDA Runtime API 安装5. 安装 cuDNN5.1 cuDNN下载 6. 一点点小注意事项 1. 问题缘由 之前查找 CUDA 版本时都是直接使用的 nvidia-smi 指令&am…

Meta AI的Nougat能够将数学表达式从PDF文件转换为机器可读文本

大多数科学知识通常以可移植文档格式&#xff08;PDF&#xff09;的形式存储&#xff0c;这也是互联网上第二突出的数据格式。然而&#xff0c;从这种格式中提取信息或将其转换为机器可读的文本具有挑战性&#xff0c;尤其是在涉及数学表达式时。 为了解决这个问题&#xff0c…

Pyecharts数据可视化(一)

目录 1.Pyecharts简介 2.Pyecharts的常用方法 3.Pyecharts绘制柱状图 3.1 绘制并列柱状图 3.2 绘制水平直方图 1.Pyecharts简介 Pyecharts是一个用于创建交互式图表的Python库。它基于Echarts&#xff0c;一个强大的JavaScript图表库&#xff0c;Pyecharts允许Python开发者…

Shell-AI:基于LLM实现自然语言理解的CLI工具

一、前言 随着AI技术的普及&#xff0c;部分技术领域的门槛逐步降低&#xff0c;比如非科班出身&#xff0c;非技术专业&#xff0c;甚至从未涉足技术领域&#xff0c;完全不懂服务器部署和运维&#xff0c;如今可以依托AI大模型非常轻松的掌握和使用相关技术&#xff0c;来解…

STM32-串口通信(串口的接收和发送)

文章目录 STM32的串口通信一、STM32里的串口通信二、串口的发送和接收串口发送串口接收 三、串口在STM32中的配置四、串口接收的两种实现方式1. 需要更改的地方2. 查询RXNE标志位3. 使用中断 总结 STM32的串口通信 本文在于记录自己的学习过程中遇到的问题和总结&#xff0c;各…