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">
				<view class="locate-city">
					<image src="@/static/img/locate.svg" class="_icon"></image>
					<text class="__name">贵阳</text>
				</view>
				<label class="search-bar" @click="$app.url.goto('/pages/search/search')">
					<input placeholder-class="app-placeholder" placeholder="输入目的地/电站名" />
					<image src="@/static/img/search.svg" class="_icon-search"></image>
				</label>
			</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>
		
		<!-- 电站信息 -->
		<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].name}}</view>
						</view>
						<view class="distance">
							<view class="icon"><image src="@/static/img/distance.svg" mode="widthFix"></image></view>
							<text>{{list.data[list.index].params.rangeShow}}</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].params.emptyFast}}</text><text class="max">{{list.data[list.index].params.totalFast}}</text></view>
						</view>
						<view class="charge purple">
							<view class="icon">慢充</view>
							<view><text class="value">{{list.data[list.index].params.emptySlow}}</text><text class="max">{{list.data[list.index].params.totalSlow}}</text></view>
						</view>
						<view class="charge blue">
							<view class="icon">停车</view>
							<view><text class="value">3</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]&&list.data[list.index].params.nowPrice)?list.data[list.index].params.nowPrice.toFixed(4):'0.0000'}}</text>
							<text class="unit">元/度</text>
						</view>
						<view>{{list.data[list.index].params.priceShow}}</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">充电减免2小时停车费，超出时长部分计时收费</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(){
				return this.list.data.map((i,index)=>{
					i.width = index == this.list.index ?32:28;
					i.height = index == this.list.index ?32:28;
					i.iconPath = `../../static/img/logo.png`;
					return i;
				});
			}
		},
		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("post","/chargeApi/getStations",{order:"0",lng,lat},{}).then(res=>{
					
					res.stationList.forEach(i=>{
						var txPoint = this.convertBdToTx(i.lng,i.lat)
						i.lng = txPoint.lng
						i.lat = txPoint.lat
					})
					
					res.stationList.forEach(i=>{
						i.latitude = i.lat
						i.longitude = i.lng
					})
					this.list.data = res.stationList
				})
			},
			// 点击标记
			markertap(e){
				this.list.index = this.list.data.findIndex(i=>i.id==e.detail.markerId);
				this.$refs.site.open();
			},
			// 关闭站点信息
			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>