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

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

(1)展示位置地图

uniapp官网提供了相关组件,uniapp-map组件https://uniapp.dcloud.net.cn/component/map.html#

具体用法:

html结构

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

data数据

javascript 复制代码
              
				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()https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation用于唤起第三方软件(真机测试有效)

javascript 复制代码
			// 打开的点击事件, 传经纬度和地点名
			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)https://uniapp.dcloud.net.cn/api/location/location.html在微信端只能获取到经纬度,无法获取到详细中文地址,所以官方推荐使用第三方库,这里我使用的是腾讯地图,简单方便。

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

打开微信小程序JavaScript SDK地址https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview,根据官网教程注册

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

html部分

javascript 复制代码
<view>当前位置:{{address}}</view>

data数据

javascript 复制代码
address:'定位中.....'

函数部分

javascript 复制代码
        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)https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation

实例代码:

javascript 复制代码
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中添加代码

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

也可以在配置中更改

相关推荐
三天不学习1 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建2 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_5 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计2 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序