charge_miniapp/pages/map/map.vue

<template>
	<ax-body hide-indicator-area>
		<!-- 标题栏 -->
		<template #title>
			<view class="titlebar event-off">
				<image src="@/static/img/title.png" class="page-title"></image>
				<!-- <text class="page-subtitle">“新能源充电新能源”</text> -->
			</view>
		</template>
		<view class="map-box">
			<map id="map" class="map" @markertap.stop="markertap" :latitude="map.latitude" :show-location="true"
				:longitude="map.longitude" :markers="markersData"></map>
		</view>
		<view class="contet event-off">
			<!-- 搜索块 -->
			<view id="search" class="app-flex search-view event-on">
				<label class="search-bar" @click="$app.url.goto('/pages/search/search')">
					<view class="locate-city">
						<image src="@/static/img/locate.svg" class="_icon"></image>
						<text class="__name">贵阳</text>
					</view>
					<input placeholder-class="app-placeholder" placeholder="| 输入目的地/电站名" />
					<image src="@/static/img/search.svg" class="_icon-search"></image>
				</label>
				<view style="width: 20rpx;"></view>
				<!-- 列表模式 -->
				<view class="top-subinfo">
					<view @click="$app.url.goto('/pages/index/index', false)" class="list-model event-on">
						<image src="@/static/img/switch.svg" class="icon"></image>
						<view>列表模式</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 电站信息 -->
		<ax-popup @closed="onClosed" ref="site" position="bottom" maskType="" maskClose>
			<view class="popup-body">
				<view @click="gotoSiteDetail()" class="site event-on">
					<view class="name-wrap">
						<view class="name">
							<view class="icon">
								<image src="@/static/img/plug.svg" mode="widthFix"></image>
							</view>
							<view class="txt">{{ list.data[list.index].stationName }}</view>
						</view>
						<view class="distance">
							<view class="icon">
								<image src="@/static/img/distance.svg" mode="widthFix"></image>
							</view>
							<text>{{ list.data[list.index].distance }}km</text>
						</view>
					</view>
					<view class="ec-name">{{ list.data[list.index].equipmentOwnerName }}</view>
					<view class="app-flex c-between info">
						<view class="charge">
							<view class="icon">快充</view>
							<view><text class="value">{{ list.data[list.index].fastCharging }}</text></view>
						</view>
						<view class="charge purple">
							<view class="icon">慢充</view>
							<view><text class="value">{{ list.data[list.index].slowCharging }}</text></view>
						</view>
						<view class="charge blue">
							<view class="icon">停车</view>
							<view><text class="value">{{ list.data[list.index].parkingFee || '0' }}</text><text
									class="max">h</text></view>
						</view>
					</view>
					<view class="price">
						<view class="app-flex middle" style="color: #FF5D50;">
							<text class="value">{{ list.data[list.index].platformPrice }}</text>
							<text class="unit">元/度</text>
						</view>
						<view>{{ list.data[list.index].peakValue }}{{ list.data[list.index].peakTime }}</view>
					</view>
					<view class="parkade">
						<view class="icon">
							<image src="@/static/img/parkade.svg" mode="widthFix"></image>
						</view>
						<!-- <view class="txt" v-html="list.data[list.index].parkTips"></view> -->
						<view class="txt">{{ list.data[list.index].tips }}</view>
					</view>
				</view>
				<view :style="{ height: `${footPad}px` }"></view>
			</view>
		</ax-popup>
		<app-navigation id="app-navigation" active="home"></app-navigation>
	</ax-body>
</template>

<script>
export default {
	onLoad() {
		this.loadData();
	},
	mounted() {
		this.$nextTick(() => {
			this.$app.act.selectorQuery(this, '#app-navigation').then(res => {
				this.footPad = res.height + 20;
			});
		});
		var mapCtx = wx.createMapContext('map');

		let location = this.$app.storage.get('USER_LOCATION')
		if (location && location.split(",").length == 2) {
			mapCtx.moveToLocation({
				longitude: location.split(",")[0],
				latitude: location.split(",")[1]
			});
		} else {
			mapCtx.moveToLocation()
		}

		this.mapCtx = mapCtx
	},
	data() {
		return {
			mapCtx: {},
			footPad: 0,
			map: {
				latitude: 26.646694,
				longitude: 106.628201,
			},
			list: {
				index: -1,
				data: []
			},
		}
	},
	computed: {
		markersData() {
			const markers = this.list.data.map((i, index) => {
				const marker = {
					...i,
					id: parseInt(i.stationId) || index,
					width: index == this.list.index ? 32 : 28,
					height: index == this.list.index ? 32 : 28,
					iconPath: '/static/img/marker-icon.png',
				};
				return marker;
			});
			return markers;
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: "用券充天天都享会员价", // 标题
			path: "/pages/index/index", // 分享路径
			imageUrl: '../../static/img/share.jpg', // 分享图
			desc: '用券充天天都享会员价'
		};
	},
	onShareTimeline() {
		return {
			title: "用券充天天都享会员价", // 标题
			path: "/pages/index/index", // 分享路径
			imageUrl: '../../static/img/share.jpg' // 分享图
		};
	},
	methods: {
		convertBdToTx(lng, lat) {
			// 百度坐标系（BD09）转火星坐标系（GCJ-02，即腾讯地图使用的坐标系）  
			// 这里的转换公式是基于经验公式，可能存在一定的误差  
			let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
			let x = lng - 0.0065;
			let y = lat - 0.006;
			let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			let lngs = z * Math.cos(theta);
			let lats = z * Math.sin(theta);
			return {
				lng: lngs,
				lat: lats
			};
		},
		// 载入数据
		loadData() {

			let location = this.$app.storage.get('USER_LOCATION')
			let lng = ""
			let lat = ""
			if (location && location.split(",").length == 2) {
				lng = location.split(",")[0]
				lat = location.split(",")[1]
			}

			this.$api.base("get", "/applet/v1/homePage/getStationInfoMapList", {
				longitude: lng,
				latitude: lat
			}, {}).then(res => {
				res.data.forEach(i => {
					var txPoint = this.convertBdToTx(i.longitude, i.latitude)
					i.longitude = txPoint.lng
					i.latitude = txPoint.lat
				})
				this.list.data = res.data
			})
		},
		// 点击标记
		markertap(e) {
			console.log(e.detail.markerId, '点击的标记事件');
			const selectedItem = this.list.data.find(i => parseInt(i.stationId) === e.detail.markerId);
			if (selectedItem) {
				this.list.index = this.list.data.indexOf(selectedItem);
				console.log(this.list.data[this.list.index], '点击的标记');
				this.$refs.site.open();
			} else {
				console.log('未找到匹配的标记点');
			}
		},
		// 关闭站点信息
		onClosed() {
			this.list.index = -1;
		},
		gotoSiteDetail() {
			this.$app.url.goto('/pages/site/site?item=' + JSON.stringify(this.list.data[this.list.index]));
		}
	}
}
</script>

<style>
@import url("map.css");
</style>