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

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"]

也可以在配置中更改

相关推荐
拼图20912 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904613 小时前
小程序部分pai
小程序
wocwin13 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184116 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090619 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921432 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview