uniapp相关地图 API调用

目录

一、 注意事项: manifest.json需增加配置

二、获取用户收货地址 [uni.chooseAddress]

三、获取当前的地理位置、速度 [uni.getLocation]

四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]

五、使用腾讯地图逆地址解析接口实现城市自动定位回显


一、 注意事项: manifest.json需增加配置
"mp-weixin": {
	"requiredPrivateInfos": ["chooseLocation", "getLocation", "getLocation","chooseAddress"],
	"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息将用于小程序位置接口的效果展示"
		}
	}
},
二、获取用户收货地址 [uni.chooseAddress]

API接口参考:https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress

1、效果图

uniapp相关地图 API调用_第1张图片

2、vue页面代码





三、获取当前的地理位置、速度 [uni.getLocation]

API接口参考:https://uniapp.dcloud.net.cn/api/location/location.html#getlocation

1、调用方式

uni.getLocation({
	type: 'wgs84', // 返回可以用于uni.openLocation的经纬度,默认为wgs84的gps坐标
	success: (res) => {
		console.log(res)
	},
	fail: (err) => {
		console.error('获取位置失败:', err);
	}
});

2、res结果

{  
    "latitude": 29.56471,  
    "longitude": 106.55073,  
    "speed": -1,  
    "accuracy": 65,  
    "verticalAccuracy": 65,  
    "horizontalAccuracy": 65,  
    "errMsg": "getLocation:ok"  
}
四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]

API接口参考:

https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation

https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation

1、效果图

uniapp相关地图 API调用_第2张图片    uniapp相关地图 API调用_第3张图片

2、子组件代码





3、父组件使用子组件





4、res结果

{  
    "errMsg": "chooseLocation:ok",  
    "name": "雾都宾馆",  
    "address": "重庆市渝中区上曾家岩24号",  
    "latitude": 29.565184,  
    "longitude": 106.551766  
}
五、使用腾讯地图逆地址解析接口实现城市自动定位回显

uniapp中腾讯地图SDK-安装及配置(自动定位回显城市)-CSDN博客 

你可能感兴趣的:(uniapp,uni-app,apache,服务器)