meishidaQS/pages/map/mapboxView.nvue

<template>
	<view>
		<mapbox_navi_view ref="RnaviView" :style="'width: 100%;height:'+mapHeight+'rpx;'"
		    @onViewCreated="onViewCreated"></mapbox_navi_view>
	</view>
</template>

<script>
	
	var MapBox = uni.requireNativePlugin('MapBox-Plugin');
	var naviView=null
	export default {
		data() {
			return {
				latitude:0,
				longitude:0,
				navdata:'',
				firstopen:true,
				isAndroid:false,
				mapHeight:0,
			}
		},
		onLoad(option) {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			if(option.navdata){
				this.navdata=JSON.parse(option.navdata);
			}
			if(this.isAndroid){
				this.mapHeight=systemInfo.windowHeight*(750/systemInfo.windowWidth);
			}
			else{
				this.mapHeight=systemInfo.windowHeight*(750/systemInfo.windowWidth)-systemInfo.statusBarHeight*(750/systemInfo.windowWidth);
			}
			//检查并授权定位权限
			MapBox.checkLocationPermission(function(res){
			    console.log(res);
			    if (res.result == true) {
			        //定位已授权
					
			    } else {
			        //定位权限杯拒绝
			    }
			});
			//ios-------------------------------------------------------------
			if(!this.isAndroid){
				var that = this;
				
				uni.onPushMessage((res) => {
					console.log("收到推送消息map：",res) //监听推送消息
						var payload=res.data.payload;
						if(res.type=='receive'){
							plus.runtime.setBadgeNumber(0);
							var content=res.data.content;
							if(content.indexOf("Call")!=-1){
								//getApp().globalData.iosfl(3);
								return
							}
							if(content.indexOf("Message")!=-1){
								//getApp().globalData.iosfl(4);
								return
							}
						}
				})
			}
			
		},
		mounted() {
		    //导航view
		    naviView = this.$refs.RnaviView;
			if(!this.isAndroid){
				//getApp().globalData.iosfl(1);
				this.getLocation();
			}
		},
		onUnload() {
			if(!this.isAndroid){
				//getApp().globalData.iosfl(2);
			}
		},
		methods: {
			i18n(str){
				return getApp().globalData.$t(str);
			},
			onViewCreated() {
				//设置导航回调
				var that = this;
				naviView.setNaviCallback(function(res){
					//console.log(res);
					if (res.type == "onLocationChanged"&&that.isAndroid) {
						//当前位置
						that.latitude = res.data.latitude;
						that.longitude = res.data.longitude;
						if(that.firstopen){
							that.firstopen=false;
							setTimeout(function() {
							  // 这里写要延时执行的代码
							  that.guihualuji();
							}, 2000);
						}
					} else if (res.type == "onActiveNavigation") {
		
					} else if (res.type == "onInfoPanelHidden") {
						//点击结束按钮，回调,关闭页面
						console.log('点击结束按钮');
						uni.navigateBack({});
					}
				});
			},
			
			getLocation(){
				var that = this;
				uni.getLocation({
					type:  "wgs84", //默认为 wgs84 返回 gps 坐标//谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标
					geocode: "true",
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: function (res) {
					  //console.log("app定位获取:", res);
					  if(res.longitude>-180&&res.longitude<180){
						  if(res.latitude>-90&&res.latitude<90){
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							if(that.firstopen){
								that.firstopen=false;
								setTimeout(function() {
								  // 这里写要延时执行的代码
								  that.guihualuji();
								}, 1000);
							}	
						  }
					  }
					},
					fail(err) {
						console.log('getLocation err')
					}
				});
			},
			
			guihualuji(){
				var that = this;
				if(this.latitude==0||this.longitude==0){
					uni.showToast({
						title:that.i18n('api.dingweishibai'),
						icon: "none",
						duration: 2500
					})
					// setTimeout(function() {
					//   // 这里写要延时执行的代码
					//   uni.navigateBack();
					// }, 2500);
					return;
				}
				//路径规划
				console.log('guihualuji')
				var navType=uni.getStorageSync('navType');
				if(''==navType||null==navType||undefined==navType){
					navType='cycling';
					uni.setStorageSync('navType','cycling');
				}
				naviView.requestRoutes({
				    coordinatesList:[
				        {
				            latitude:this.latitude,
				            longitude:this.longitude
				        },
						{
						    latitude:this.navdata.latitude,
						    longitude:this.navdata.longitude
						}
				    ],//[起点，途经点(可选)，终点]
				    steps:true,
				    bannerInstructions:true,
				    voiceInstructions:true,
				    profile:navType//driving-traffic driving walking cycling
				}, function(res){
				    console.log(res);
				    if (res.type == "onRoutesReady") {//路径规划成功
				        //预览路线
				        naviView.startRoutePreview();
						if(!that.isAndroid){
							setTimeout(function() {
							  // 这里写要延时执行的代码
							  that.startTripSession();
							}, 3500);
						}
						
				    }
				});
				
			},
			startTripSession() {
				console.log('startTripSession')
			    //开始导航
			    naviView.startTripSession();
			},
		}
	}
</script>

<style>

</style>