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

news2024/10/7 6:51:17

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.coloradmin.cn/o/963379.html

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

相关文章

文件夹如何隐藏加密?文件夹加密隐藏软件有哪些?

文件夹加密和文件夹隐藏都是保护文件夹数据安全的方法&#xff0c;我们可以将这两者结合&#xff0c;以实现更好的保护。那么&#xff0c;文件夹如何隐藏加密呢&#xff1f; 如何隐藏加密文件夹&#xff1f; 想要隐藏加密文件夹&#xff0c;我们可以通过以下两种方式来实现&am…

【算法竞赛宝典】读文章

【算法竞赛宝典】读文章 题目描述代码展示 题目描述 代码展示 //读文章 #include <iostream> #include <string.h>using namespace std;int main() {int i, j, upp, low, dig, spa, oth;char text[3][80];upp low dig spa oth 0;for (i 0; i < 3; i) {g…

Pyecharts数据可视化(一)

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

分享几个靠谱的网络项目,空闲时间就能月收益几千!

近几年来最大的感受就是赚钱越来越难了&#xff0c;对于上班族来说固定的那份工资比较有限&#xff0c;相信很多朋友们都想开拓一些副业&#xff0c;给自己增加一些收入&#xff0c;小编今天给大家推荐几个靠谱的最新项目分享给大家。 第一个&#xff1a;文案编辑 文案编辑是…

详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactive的区别 1、前言 ref和reactive是Vue3中用来实现数据响应式的API&#xff0c;一般情况下&#xff0c;ref定义基本数据类型…

6.(Python数模)游泳接力指派问题

Python解决游泳接力指派问题 该问题也属于一个线性规划问题 源代码 import pulp # 导入 pulp 库 import numpy as np# 主程序 def main():# 问题建模&#xff1a;"""决策变量&#xff1a;x(i,j) 0, 第 i 个人不游第 j 种姿势x(i,j) 1, 第 i 个人游第 …

小疆智控CANOpen转PROFINET网关连接EA180C CANOPEN总线型伺服配置案例

1、首先新建一个工程&#xff0c;在CanOpen转Profinet网关配置软件中添加主站设备&#xff0c;如下图&#xff1b; 2、在CanOpen转Profinet网关设备点击导入EA180C CANOPEN总线型伺服 EDS 文件&#xff0c;右键添加从属设备&#xff1b; 3、设备设置站地址&#xff0c;如图&…

【LeetCode算法系列题解】第46~50题

CONTENTS LeetCode 46. 全排列&#xff08;中等&#xff09;LeetCode 47. 全排列 II&#xff08;中等&#xff09;LeetCode 48. 旋转图像&#xff08;中等&#xff09;LeetCode 49. 字母异位词分组&#xff08;中等&#xff09;LeetCode 50. Pow(x, n)&#xff08;中等&#xf…

【高阶产品策略】设计有效的AB测试

文章目录 1、A/B测试概述2、A/B测试实施过程3、A/B测试中需要注意的地方4、从一个案例中看A/B测试 1、A/B测试概述 2、A/B测试实施过程 3、A/B测试中需要注意的地方 4、从一个案例中看A/B测试

水果库存系统(SSM+Thymeleaf版)

不为失败找理由&#xff0c;只为成功找方法。所有的不甘&#xff0c;因为还心存梦想&#xff0c;所以在你放弃之前&#xff0c;好好拼一把&#xff0c;只怕心老&#xff0c;不怕路长。 文章目录 一、前言二、系统架构与需求分析1、技术栈1.1 后端1.2 前端 2、需求分析 三、设计…

python 深度学习 解决遇到的报错问题4

目录 一、DLL load failed while importing _imaging: 找不到指定的模块 二、Cartopy安装失败 三、simplejson.errors.JSONDecodeError: Expecting value: line 1 column 1 (char 0) 四、raise IndexError("single positional indexer is out-of-bounds") 五、T…

Linux系统Ubuntu以非root用户身份操作Docker的方法

本文介绍在Linux操作系统Ubuntu版本中&#xff0c;通过配置&#xff0c;实现以非root用户身份&#xff0c;进行Docker各项操作的具体方法。 在文章Linux系统Ubuntu配置Docker详细流程&#xff08;https://blog.csdn.net/zhebushibiaoshifu/article/details/132612560&#xff0…

一文1800字从0到1使用Python Flask实战构建Web应用

Python Flask是一个轻量级的Web框架&#xff0c;它简单易用、灵活性高&#xff0c;适用于构建各种规模的Web应用。本文将介绍如何使用Python Flask框架来实战构建一个简单的Web应用&#xff0c;并展示其基本功能和特性。 第一部分&#xff1a;搭建开发环境 在开始之前我们需要…

Redis常用命令,你了解哪些呢?

目录 前置工作&#xff1a;先进入Redis客户端 1、Redis最核心的两个命令&#xff1a;get & set set&#xff1a;存键值对 get&#xff1a;根据key&#xff0c;取出value 2、Redis全局命令 2.1、keys ---查询当前服务器上匹配的key 2.1.1. &#xff1f; 匹配任意一个字…

Python VScode 配置

在上一章节中我们已经安装了 Python 的环境&#xff0c;本章节我们将介绍 Python VScode 的配置。 准备工作&#xff1a; 安装 VS Code安装 VS Code Python 扩展安装 Python 3 安装 VS Code VSCode&#xff08;全称&#xff1a;Visual Studio Code&#xff09;是一款由微软…

关于岛屿的三道leetcode原题:岛屿周长、岛屿数量、统计子岛屿

题1&#xff1a;岛屿周长 给定一个 row x col 的二维网格地图 grid &#xff0c;其中&#xff1a;gridi 1 表示陆地&#xff0c; gridi 0 表示水域。 网格中的格子 水平和垂直 方向相连&#xff08;对角线方向不相连&#xff09;。整个网格被水完全包围&#xff0c;但其中恰…

龙迅LT9611 2PORT MIPIDSI/CSI转HDMI,带HDCP,支持分辨率高达4K30HZ

龙迅LT9611 1.描述&#xff1a; LT9611 MIPIDSI/CSI到HDMI1.4桥具有双端口MIPID-PHY接收器前端配置&#xff0c;每个端口有4个数 据通道&#xff0c;每个数据通道运行2Gbps&#xff0c;最大输入带宽为16Gbps。该桥提供了一个HDMI数据输出与可 选的S/PDIF或8通道I2S串行音频…

STM32F4XX/APM32F4XX USB OTA升级

近期在研究USB CDC协议&#xff0c;使用USB Virtual Port Com功能与上位机通讯做了OTA功能。开发平台&#xff1a;MDK529 开发硬件&#xff1a;APM32F411 首先看下手册Flash分布&#xff0c;Flash总共8个扇区。 接下来进行Flash分区。 扇区 0 和 扇区 1做Boo区。 扇区 2做APP跳…

C#面试十问

1&#xff1a;C#中变量类型分为哪两种&#xff1f;它们的区别是什么&#xff1f;2&#xff1a;Class和Struct的区别&#xff1f;3&#xff1a;C#中类的修饰符和类成员的修饰符有哪些&#xff1f;4&#xff1a;面向对象的三个特征&#xff08;特点&#xff09;是什么&#xff1f…

随机游走任务中时间差分(0)和常数α蒙特卡罗方法的比较

一、说明 在这篇文章中&#xff0c;我们讨论了常α MC 方法和 TD&#xff08;0&#xff09; 方法之间的区别&#xff0c;并比较了它们在随机游走任务中的性能。TD方法在本文的所有测试中都覆盖了MC方法&#xff0c;因此将TD视为强化学习任务的方法是更可取的选择。 二、方法库介…