siyu_app/pages_watch/message/sosMap.nvue

<template>
	<view  >
		<map :style="{width: windowWidth+'px', height: windowHeight+'px'}" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		<view class="footer">
			<view class="infobox">
				<view style="flex: 1;">
					<view class="infobox-title">
						<image class="address_icon" src="@/static/images/pages_watch/icons/address_icon.png" mode="aspectFill"></image>
						<text class="text">{{dateTime.substring(5,16)}} 手表端发起紧急呼救{{windowHeight}}</text>
					</view>
					<text class="text">{{address}}</text>
				</view>
				<image class="location" src="@/static/images/pages_watch/icons/location2.png" mode="aspectFill" @click="handleMap()"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAddressByLocation } from "@/api/pages_watch/common.js";

	export default {
		data() {
			return {
				windowWidth: uni.getSystemInfoSync().windowWidth,
				windowHeight: uni.getSystemInfoSync().windowHeight,
				platform:uni.getSystemInfoSync().platform,
				location: '116.39742,39.909', // 经度,纬度
				address: '',
				dateTime: '',
				latitude: 39.909, // 纬度
				longitude: 116.39742, // 经度
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/images/pages_watch/icons/location.png',
					width: '50', // 标记点图标宽度
					height: '50' // 标记点图标高度
				}]
			}
		},
		onLoad(option) {
			this.location = option.location || '116.39742,39.909'
			this.latitude = this.location.split(',')[1]
			this.longitude = this.location.split(',')[0]
			this.covers[0].latitude = this.latitude
			this.covers[0].longitude = this.longitude
			this.dateTime = option.dateTime || ''
			this.getAddress()
		},
		methods: {
			getAddress() {
				getAddressByLocation({location: this.location}).then(res=>{
					this.address = res.msg
				})
			},
			handleMap() {
				// #ifdef APP
				this.toMapAPP(this.location)
				// #endif
				// #ifdef MP-WEIXIN
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					name: this.address,
					success: function () {
						console.log('success');
					},
					complete:(res)=> {
						console.log('complete',res);
					}
				});
				// #endif
			},
			//打开第三方地图
			toMapAPP(){
				let latitude = this.latitude
				let longitude = this.longitude
				let name = this.address
			    let url = "";
			    if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
					    title: "选择地图应用",
					    cancel: "取消",
					    buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
					}, function(item) {
						let tit = ''
					    switch (item.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
					        case 1:
							    //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								tit = '腾讯地图'
					            url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
					            break;
					        case 2:
								tit = '百度地图'
					            url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
					            break;
							case 3:
								tit = '高德地图'
							    url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
					        default:
					            break;
					    }
					    if (url != "") {
					        url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
					        plus.runtime.openURL(url, function(e) {
					            // plus.nativeUI.alert("本机未安装指定的地图应用");
								uni.showToast({
									title: '未安装 ' + tit,
									icon: 'none'
								})
					        });
					    }
					})
			    } else {
			        // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
			        plus.nativeUI.actionSheet({
			            title: "选择地图应用",
			            cancel: "取消",
			            buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
			        }, function(item) {
						let tit = ''
			            switch (item.index) {
			                case 1:
								tit = '腾讯地图'
			                    url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
			                    break;
			                case 2:
								tit = '百度地图'
			                    url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
			                    break;
							case 3:
								tit = '高德地图'
							    url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
			                default:
			                    break;
			            }
			            if (url != "") {
			                url = encodeURI(url);
			                plus.runtime.openURL(url, function(e) {
								uni.showToast({
									title: '未安装 ' + tit,
									icon: 'none'
								})
			                    // plus.nativeUI.alert("本机未安装指定的地图应用");
			                });
			            }
			        })
			    }
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
	}
	.address_icon {
		height: 48rpx;
		width: 48rpx;
		margin-right: 10rpx;
	}
	.text {
		color: #ffffff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
	}
	.location {
		height: 98rpx;
		width: 98rpx;
	}
	.footer {
		position: fixed;
		bottom:0;
		left: 0;
		width:750rpx;
		padding: 40rpx 0 40rpx 0;
		z-index: 998;
		// box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
	}
	.infobox {
		margin-top: -40rpx;
		width: 670rpx;
		padding: 20rpx;
		// box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #282c34;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	.infobox-title {
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>