meishidaQS/components/disanfanfNav/disanfanfNav.vue

<template>
	<view style="width: 380rpx;background-color: white;border-radius: 20rpx;">
		<view class="contentColumnC" style="width: 100%;margin-top: 10rpx;">
			<view v-if="hasgoogle" class="contentInRowC wanchengV" @click="openNav(1)">
				<view class="wanchengT">{{$t('user.googleNav')}}</view>
			</view>
			<view v-if="!isAndroid" class="contentInRowC wanchengV" @click="openNav(2)">
				<view class="wanchengT">{{$t('user.appleNav')}}</view>
			</view>
			<view v-if="hasAmap" class="contentInRowC wanchengV" @click="openNav(3)">
				<view class="wanchengT">{{$t('user.gaodeNav')}}</view>
			</view>
			<view v-if="hasBaiduMap" class="contentInRowC wanchengV" style="margin-bottom: 40rpx;" @click="openNav(4)">
				<view class="wanchengT">{{$t('user.baiduNav')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"disanfanfNav",
		props:{
			lat:'',
			lon:'',
			cityName:''
		},
		data() {
			return {
				isAndroid:false,
				hasBaiduMap:true,
				hasAmap:true,
				hasgoogle:true
			};
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			if(this.isAndroid){
				this.initAndroidMap();
			}
		},
		methods:{
			initAndroidMap(){
				this.hasBaiduMap = plus.runtime.isApplicationExist({
					pname: 'com.baidu.BaiduMap',
					action: 'baidumap://'
				});
				this.hasAmap = plus.runtime.isApplicationExist({
					pname: 'com.autonavi.minimap',
					action: 'androidamap://'
				});
				this.hasgoogle = plus.runtime.isApplicationExist({
					pname: 'com.google.android.apps.maps',
					action: 'comgooglemaps://'
				});
			},
			
			
			openNav(index){
				if(this.isAndroid){
					let urlNavMap;
					if(index==1){
						urlNavMap = 'google.navigation:q=' + this.lat + ',' + this.lon;
					}
					if(index==3){
						let urlAmap =
							'androidamap://viewMap?sourceApplication=appname&poiname='+this.cityName+'&lat='+this.lat+'&lon='+this.lon+'&dev=1';
						urlNavMap = encodeURI(urlAmap)
					}
					if(index==4){
						let urlBaiduMap =
						'baidumap://map/direction?region=起点&destination='+this.lat+','+this.lon+'&coord_type=wgs84&mode=riding&src=andr.paotuiwang.qishou';
						urlNavMap = encodeURI(urlBaiduMap)
					}
					plus.runtime.openURL(urlNavMap);
				}
				else{
					var url='';
					if(index==1){
						url='comgooglemapsurl://?daddr='+ this.lat + ',' + this.lon;
					}
					if(index==2){
						url = 'http://maps.apple.com/?q=' +this.cityName + '&ll=' + this.lat + ',' + this.lon + '&spn=0.008766,0.019441';
					}
					if(index==3){
						url ='iosamap://path?sourceApplication=fuxishan_uni_client&dlat='+this.lat+'&dlon='+this.lon+'&dname='+this.cityName+'&dev=1&t=0';
					}
					if(index==4){
						url ='baidumap://map/marker?location='+this.lat+','+this.lon+'&title='+this.cityName+'&content='+this.cityName+'&coord_type=wgs84&src=ios.baidu.openAPIdemo';
					}
					
					if (url!='') {
						url = encodeURI(url)
						plus.runtime.openURL(url, function(e) {
						    plus.nativeUI.alert(that.$t('user.weianzhuangapp'));
						});
					}
				}
				
				this.$emit('ENavOpen');
			},
			
			handlePosition(lat,lon,cityName) {
				//如果是Andrios的设备
				if (plus.os.name == 'Android') {
					console.log('Android')
					//重点是下面的url要根据官方给出的api进行对应，不同的需求对应不同的api
					let urlBaiduMap =
					'baidumap://map/direction?region=起点&destination='+lat+','+lon+'&coord_type=wgs84&mode=riding&src=andr.paotuiwang.qishou';
					urlBaiduMap = encodeURI(urlBaiduMap)
					let urlAmap =
						'androidamap://viewMap?sourceApplication=appname&poiname='+cityName+'&lat='+lat+'&lon='+lon+'&dev=1';
					urlAmap = encodeURI(urlAmap)
					
					
					var buttons=[];
					if(hasBaiduMap){
						buttons.push({
							title: this.$t('user.baiduNav'),
							value:urlBaiduMap
						})
					}
					if(hasAmap){
						buttons.push({
							title: this.$t('user.gaodeNav'),
							value:urlAmap
						})
					}
					// if(hasgoogle){
					// 	buttons.push({title: this.$t('user.googleNav')})
					// }
					if(buttons.length==0){
						if(hasgoogle){
							var url = 'google.navigation:q=' + lat + ',' + lon;  //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
							plus.runtime.openURL(url);
							return;
						}
					}
					
					plus.nativeUI.actionSheet({
						title: this.$t('user.xuanzedaoh'),
						cancel: this.$t('index.quxiao'),
						buttons: buttons
					}, function(e) {
						plus.runtime.openURL(buttons[e.index-1].value);
					});
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
					var url='';
					var that = this;
					plus.nativeUI.actionSheet({
						title: this.$t('user.xuanzedaoh'),
						cancel: this.$t('index.quxiao'),
						buttons: [{
							title: this.$t('user.baiduNav')
						},{
							title: this.$t('user.gaodeNav')
						},{
							title: this.$t('user.googleNav')
						},{
							title: this.$t('user.appleNav')
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url ='baidumap://map/marker?location='+lat+','+lon+'&title='+cityName+'&content='+cityName+'&coord_type=wgs84&src=ios.baidu.openAPIdemo';
								break;
							case 2:
								url ='iosamap://path?sourceApplication=fuxishan_uni_client&dlat='+lat+'&dlon='+lon+'&dname='+cityName+'&dev=1&t=0';
								break;
							case 3:
								url='comgooglemapsurl://?daddr='+ lat + ',' + lon;
								break;
							case 4:
								url = 'http://maps.apple.com/?q=' +cityName + '&ll=' + lat + ',' + lon + '&spn=0.008766,0.019441';
								break;
							default:
								break;
						}
						if (url!='') {
							url = encodeURI(url)
							plus.runtime.openURL(url, function(e) {
							    plus.nativeUI.alert(that.$t('user.weianzhuangapp'));
							});
						}
					})
				}
			},
		}
	}
</script>

<style>
	.wanchengV{
		width: 300rpx;
		height: 68rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
		background-color: #006AFF;
	}
	.wanchengT{
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
		color: white;
		border-radius: 8rpx;
		text-align: center;
	}

</style>