【uniapp】uniapp自带的地图选择位置

官方文档:uni.getLocation(OBJECT) | uni-app官网 (dcloud.net.cn)

使用方法(代码)

1、在manifest.json下mp-weixin进行配置

"mp-weixin" : {
	"setting" : {
		"urlCheck" : false,
		"minified" : true
	},
	"permission" : {
		"scope.userLocation" : {
			"desc" : "你的位置信息将用于小程序定位"
		}
	},
    "requiredPrivateInfos" : [
            "getLocation",
			"chooseLocation"
     ],
}

2、在要使用的页面写上方法

getMapLocation(){
	uni.chooseLocation({
		success:(res)=> {
			// 将获取到的地址信息存储
			this.address = res.address
		},
		fail:()=>{
			// 如果用uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息
			uni.getSetting({
				success: (res) => {
					var status = res.authSetting;
					if(!status['scope.userLocation']){
					// 如果授权信息中没有地理位置的授权,则需要弹窗提示用户需要授权地理信息
						uni.showModal({
							title:"是否授权当前位置",
							content:"需要获取您的地理位置,请确认授权,否则地图功能将无法使用",
							success:(tip)=>{
								if(tip.confirm){
								// 如果用户同意授权地理信息,则打开授权设置页面,判断用户的操作
									uni.openSetting({
										success:(data)=>{
										// 如果用户授权了地理信息在,则提示授权成功
											if(data.authSetting['scope.userLocation']===true){
												uni.showToast({
													title:"授权成功",
													icon:"success",
													duration:1000
												})
												// 授权成功后,然后再次chooseLocation获取信息
												uni.chooseLocation({
													success: (res) => {
														// 将获取到的地址信息存储
														this.address = res.address
													}
												})
											}else{
												uni.showToast({
													title:"授权失败",
													icon:"none",
													duration:1000
												})
											}
										}
									})
								}
							}
						})
					}
				},
				fail: (res) => {
					uni.showToast({
						title:"调用授权窗口失败",
						icon:"none",
						duration:1000
					})
				}
			})
		}
	});
},

效果图

上线后效果如图

要在uniapp中使用腾讯地图并生成路线,你需要进行以下步骤: 1. 首先,确保你已经在uniapp项目中引入了腾讯地图SDK。你可以在 `manifest.json` 文件中的 `app-plus` -> `usingComponents` 中添加 `tmap` 组件来引入腾讯地图。 2. 在页面中使用腾讯地图组件,并设置好地图的样式和初始位置。你可以在页面的 `template` 中添加以下代码: ```html <tmap id="map" style="width: 100%; height: 400px;"></tmap> ``` 3. 在页面的 `script` 中初始化地图,并设置起点和终点的坐标。你可以使用腾讯地图提供的 `qq.maps.DirectionsService` 来生成路线。以下是一个示例代码: ```javascript export default { mounted() { // 初始化地图 const map = new qq.maps.Map(this.$refs.map, { center: new qq.maps.LatLng(39.916527, 116.397128), // 设置地图的初始中心位置 zoom: 13, // 设置地图的缩放级别 }); // 设置起点和终点的坐标 const start = new qq.maps.LatLng(39.912992, 116.397389); // 起点坐标 const end = new qq.maps.LatLng(39.908748, 116.397778); // 终点坐标 // 创建 DirectionsService 对象并设置起点和终点 const dirService = new qq.maps.DirectionService({ complete: function(result) { // 路线规划完成后的回调函数 if (result.status === qq.maps.DirectionsStatus.OK) { const route = result.detail.routes[0]; // 在地图上绘制路线 const routeLine = new qq.maps.Polyline({ path: route.path, map: map, }); } } }); // 发起路线规划请求 dirService.route({ start: start, end: end, policy: qq.maps.DrivingPolicy.LEAST_TIME, // 设置驾车策略,可以根据需求调整 }); }, }; ``` 这样,当页面加载完成后,地图就会显示,并且生成起点到终点的路线。 请注意,上述代码中的坐标仅作为示例,请根据实际情况修改。此外,还可以根据需求设置其他路线规划参数,如避开某些道路等。具体的参数和用法可以参考腾讯地图API文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值