hlt_app/pages/map/index.vue

<template>
	<view class="map-page">
		<view class="map-view" id="ol-map-view"></view>
		<!-- 以下view只是为了向视图层传参  start-->
		<!-- openlayers的弹窗，由于只能传dom，所以单独写一个 -->
		<view class="ol-popup" id="ol-popup-box" v-show="markerPopInfo.dataList">
			<view class="pop-header">
				<view class="title">
					{{ markerPopInfo.title }}
				</view>
				<view class="close" @tap="closeOlPopUp"></view>
			</view>
			<view class="pop-body" @tap="handleLookPop">
				<view class="info-item" v-for="(item, index) in markerPopInfo.dataList" :key="index">
					<view class="item-label">
						{{ item.indexName }}
					</view>
					<view class="item-value" :class="{'warn-value':item.indexStatus==='1'}">
						{{ item.indexValue }}{{ item.indexUnit }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	import {wgs84togcj02} from '@/utils/coordTransform.js'
	
	export default {
		data() {
			return {
				// 弹窗需要的数据
				markerPopInfo: {}, //设备弹窗信息
			}
		},
		methods: {
			//给renderJS调用的方法
			methodForRenderJs: async function(val) {
				console.log('我是逻辑层，被视图层调用了，并且收到参数：')
				console.log(val)
				if (val.type === 'startInitMap') {
					uni.showLoading({
						title: '加载中...'
					})
				}
				// 地图初始化完成，生成设备点位
				if (val.type === 'initMap') {
					uni.hideLoading()
				}
			},
			
			closeOlPopUp(){
				
			},
			
			handleLookPop(){
				
			},
			
			address: function(item) {
				console.log(item)
				let latitude = parseFloat(parseFloat(item.coordiateY).toFixed(6))
				let longitude = parseFloat(parseFloat(item.coordiateX).toFixed(6))
				let amapEnd = wgs84togcj02(longitude, latitude)
				if (plus.os.name == 'Android') {
					let Intent = plus.android.importClass('android.content.Intent');
					let intent = new Intent();
					intent.setAction(Intent.ACTION_VIEW);
					intent.addCategory(Intent.CATEGORY_DEFAULT);
					let Uri = plus.android.importClass("android.net.Uri");
					//将功能Scheme以URI的方式传入data
					let uri = Uri.parse(`androidamap://navi?sourceApplication=武都监测&lat=${amapEnd[1]}&lon=${amapEnd[0]}&dev=0`);
					intent.setData(uri);
					intent.setPackage("com.autonavi.minimap");
					var main = plus.android.runtimeMainActivity();
					main.startActivity(intent);
				}else{
					console.log("环境不对，无法导航")
				}
			}
		}
	}
</script>

<script lang="renderjs" module="MapRender">
	import {
		olRenderJs
	} from './olRender.js';
	export default {
		mixins: [olRenderJs]
	}
</script>

<style lang="scss" scoped>
	.map-page {
		height: calc(100vh - var(--window-top) - var(--window-bottom));

		.map-view {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}

		.ol-popup {
			position: absolute;
			top: 0;
			left: -240rpx;
			width: 480rpx;
			height: auto;
			background-color: #ffffff;
			border-radius: 4rpx;
			padding: 4rpx;

			.pop-header {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.sb-status {
					margin-left: 20rpx;
					width: 76rpx;
					height: 40rpx;
					border-radius: 4rpx;
					background: #E92B2B;
					font-size: 20rpx;
					font-family: Source Han Sans;
					line-height: 40rpx;
					font-weight: bold;
					text-align: center;
					color: #FFFFFF;
				}

				.normal {
					background: #05B244;
				}

				.out-line {
					background: #666666;
				}

				.title {
					margin-left: 20rpx;
					// padding: 10rpx 0;
					height: 40rpx;
					line-height: 40rpx;
					width: 100%;
					// text-align: center;
					font-family: 思源黑体;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.85);
				}

				.close {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					background: url('../../static/images/components/close.png') no-repeat;
					background-size: 100% 100%;
					top: 12rpx;
					right: 20rpx;
				}
			}

			.pop-body {
				max-height: 400rpx;
				padding: 10rpx 20rpx;
				overflow: auto;

				.info-item {
					padding: 10rpx 0;
					display: flex;
					justify-content: space-between;

					&:first-child {
						padding: 0 0 10rpx;
					}

					.item-label {
						width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #999999;
					}

					.item-value {
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.pop-fun {
				display: flex;
				justify-content: flex-end;
				padding: 10rpx;

				.btn {
					width: 100rpx;
					height: 40rpx;
					background-color: #ffffff;
					box-sizing: border-box;
					line-height: 40rpx;
					text-align: center;
					color: #2d74e7;
				}
			}
		}
	}
</style>