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

news/2025/2/11 22:26:26/

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.ppmy.cn/news/1080853.html

相关文章

phpstorm配置链接sqlserver数据库

开启sqlserver的TCP/IP 1433端口

低成本32位单片机电动工具无感方波控制方案

RAMSUN介绍基于灵动32位微处理器MM32SPIN0230的BLDC电动工具无感方波控制方案&#xff0c;包括MM32SPIN0230芯片资源。 以下是电动工具无感方波控制方案的简述&#xff1a; MM32SPIN0230电动工具专用板 芯片介绍 MM32SPIN0230系列是灵动微MindSPIN旗下高性能的单电机控制产品…

微信小程序修改数据,input不能实时回显

场景&#xff1a; 填写发票抬头&#xff0c;填写抬头公司时候&#xff0c;会根据用户输入的内容实时获取相关的公司信息&#xff0c;用户选择搜索出来的公司&#xff0c;这时候 setData,但是数据并没有回显&#xff0c;而是需要再需要点一下屏幕。 解决方案&#xff1a; 原来…

从零开发JavaWeb入门项目--十天掌握

原文网址&#xff1a;从零开发JavaWeb入门项目--十天掌握_IT利刃出鞘的博客-CSDN博客 简介 这是一个靠谱的JavaWeb入门项目实战&#xff0c;名字叫蚂蚁爱购。从零开发项目&#xff0c;视频加文档&#xff0c;十天就能学会开发JavaWeb项目&#xff0c;教程路线是&#xff1a;搭…

selenium+find_elements用法

1、假如我们遇到多个标签的class一样&#xff0c;比如像下面这样的 我们可以采用js语法去定位&#xff0c;比如&#xff1a; document.getElementsByClassName("ant-calendar-picker-input ant-input")[0]

【前端】Layui动态数据表格拖动排序

目录 一、下载layui-soul-table 二、使用 三、Layui实际使用 1、html代码 2、JS代码 3、PHP后台代码 目的&#xff1a;使用Layui的数据表格&#xff0c;拖动行进行排序。 使用插件&#xff1a;layui-soul-table 和 Layui 1.layui-soul-table文档&#xff1a;https://…

[Android 四大组件] --- Service

1 service是什么 Service是Android系统中的四大组件之一&#xff0c;它是一种长生命周期的&#xff0c;没有可视化界面&#xff0c;运行于后台的一种服务程序。 2 service分类 3 service启动方式 3.1 startService显示启动 // AndroidManifest.xml<?xml version"1…

bazel高效使用和调优

Bazel 为了正确性和高性能&#xff0c;做了很多优秀的设计&#xff0c;那么我们如何正确的使用这些能力&#xff0c;让我们的构建性能“起飞”呢&#xff0c; 我们将从本地研发和 CI pipeline 两种场景进行分析。 本地研发 本地研发通常采用默认的 Bazel 配置即可&#xff0c…