uniapp 小程序调取第三方地图导航-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 小程序调取第三方地图导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

事件:

<button @tap="map1" >导航</button>

在manifest.json的源码视图里面配置,允许获取经纬度

"mp-weixin" : {
        "appid" : "xxxxxxxxxxxxxxxxxxxxx",
        "setting" : {
            "urlCheck" : false,
            "minified" : true
        },
        "usingComponents" : true,
		"permission": {
				"scope.userLocation": {
					"desc": "你的位置信息将用于小程序位置接口的效果展示"
				}
			},
			 "requiredPrivateInfos": [
			     "chooseLocation","getLocation"
			    ]
    },

获取经纬度:

onShow () {
		let _this = this;
		uni.getLocation({
			success(res) {
				_this.latitude = res.latitude;
				_this.longitude = res.longitude;
			}
		})


  },

方法:

 map1(){
		uni.openLocation({
			latitude: this.latitude,
			longitude: this.longitude,
			name: this.detail.project_name,//去哪的名字
			address: this.detail.province + this.detail.city + this.detail.district//地址
		});
	  },

若未授权获取位置,点击弹出弹窗获取权限文章来源地址https://www.toymoban.com/news/detail-611693.html

map1(){
				
					  let that = this
					      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
					  uni.getSetting({
						success (res) {
						  console.log(res)
				
						  // 如果没有授权
						  if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
							  scope: 'scope.userLocation',
							  success () {
								//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
								uni.getLocation({
								  type: 'wgs84',
								  success: function (res) {
									that.longitude = res.longitude
									that.latitude = res.latitude
									console.log(res)
									console.log('当前位置的经度：' + res.longitude)
									console.log('当前位置的纬度：' + res.latitude)
									uni.openLocation({
										latitude: that.latitude,
										longitude:that.longitude,
										name: '郑州市二七区',//去哪的名字
										address: '郑州市二七区航海中路60号海为科技园C区10层'//地址
									});
								  }, fail (error) {
									console.log('失败', error)
								  }
								})
							  },
							  fail (error) {
								//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
								console.log('拒绝授权', error)
				
								uni.showModal({
								  title: '提示',
								  content: '若点击不授权，将无法使用位置功能',
								  cancelText: '不授权',
								  cancelColor: '#999',
								  confirmText: '授权',
								  confirmColor: '#f94218',
								  success (res) {
									console.log(res)
									if (res.confirm) {
									  // 选择弹框内授权
									  uni.openSetting({
										success (res) {
										  console.log(res.authSetting)
										}
									  })
									} else if (res.cancel) {
									  // 选择弹框内 不授权
									  console.log('用户点击不授权')
									}
								  }
								})
							  }
							})
						  } else {
							// 有权限则直接获取
							   uni.openLocation({
								latitude: that.latitude,
								longitude:that.longitude,
								name: '郑州市二七区',//去哪的名字
								address: '郑州市二七区航海中路60号海为科技园C区10层'//地址
							   });
							 
						  }
						}
					  })
					
				// uni.openLocation({
				// 	latitude: this.latitude,
				// 	longitude: this.longitude,
				// 	name: '郑州市二七区',//去哪的名字
				// 	address: '郑州市二七区航海中路60号海为科技园C区10层'//地址
				// });
			  },

到了这里，关于uniapp 小程序调取第三方地图导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！