TSYWXT-CLOUD-APP/pages/yjxt/dangerarealeaveline/leavelinemap.vue

<!--
 * @Title: 
 * @Description: 转移路线地图信息
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :style="mapStyles" :latitude="latitude" :longitude="longitude" :markers="markets"
					enable-zoom="true" :polyline="polylines" :scale="scale">
				</map>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';

	export default {
		components: {

		},
		onLoad(options) {
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50) + "px";
			this.id = options.id;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			let that = this;
			let postData = {};
			postData['id'] = this.id;
			http.request({
				url: '/galaxy-business/map/leaveline/detail',
				method: 'GET',
				data: postData
			}).then(res => {
				console.log(res)
				if (res.data != null) {
					let p = {};
					let ps = res.data.points.map(item => {
						let l = gcoord.transform(
							[item.pointLng, item.pointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						return {
							latitude: l[1],
							longitude: l[0],
						}
					})
					p['points'] = ps;
					p['color'] = '#EE6666';
					that.polylines.push(p);
					let c = gcoord.transform(
						[res.data.centerPointLng, res.data.centerPointLat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					console.log(c)
					that.latitude = c[1];
					that.longitude = c[0];
					that.scale = 16;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				title: '转移路线地图',
				id: 0,
				areaList: [],
				areaIndex: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 16,
				markets: [],
				polylines: [],
				mapStyles: {
					width: '100%',
					height: '600px'
				},
			}
		},
		computed: {

		},
		onShow() {

		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.uni-body {
		font-size: 0.7rem;
	}
</style>