hjt_erdao_WeChatApplet/pages/manage/account/map.vue

<template>
	<view class="safety" id="container"><!-- :style="{height:(showData ? '75%' : '100%')}" -->
		<map style="width: 100%; height: 75%;" :latitude="latitude" :longitude="longitude" scale="10"  
			:markers="markers" :show-location="true" @markertap="markertap">
		</map>
		<view class="model">
			<view class="info">
				<view class="info-data">
					<view class="info-title">姓名：{{model.veteransName ? model.veteransName : '-'}}</view>
					<view class="info-text">电话：{{model.veteransTel ? model.veteransTel : '-'}}</view>
					<view class="info-shopsIntroduce">身份证号：{{model.veteransIdcard ? model.veteransIdcard : '-'}}</view>
					<view class="info-shopsIntroduce">家庭住址：{{model.address ? model.address : '-'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '@/lib/amap-wx.130.js'
	import server from "@/api/index";
	import http from '@/common/http.js'
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				id: 0,
				clickable: true,
				latitude: 43.616996,
				longitude: 125.323643,
				mapKey: '1dc63f21c12985e199a715faf4c02f36',
				markers: [],
				list: [],
				model:{
					veteransName: '',
					veteransTel: '',
					veteransIdcard: '',
					address: ''
				},
				form:{
					veteransName: '',
					veteransTel: '',
					veteransIdcard: '',
					address: ''
				}
			}
		},
		onLoad(e) {
			console.log('e',e.id)
			if(e){
				this.form.veteransName = e.name;
				this.form.veteransTel = e.tel;
				this.form.veteransIdcard = e.idCard;
				this.form.address = e.address;
			}
			let that = this;
			this.amapPlugin = new amap.AMapWX({
				key: this.mapKey //该key 是在高德中申请的微信小程序key
			});
			this.amapPlugin.getRegeo({
				type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
				success: function(res) {
					const latitude = res[0].latitude;
					const longitude = res[0].longitude;
					that.longitude = longitude;
					that.latitude = latitude;
					console.log(that.longitude, that.latitude)
					that.mapInfo = res[0];
				},
				fail: (res) => {
					console.log(JSON.stringify(res));
				}
			});
			// this.getFn()
			this.getListFn();
		},
		methods: {
			image(e) {
				return http.webUrl + e
			},
			getListFn(){
				server.getInfoList(this.form).then(res =>{
					console.log("reddd", res)
					// this.list = res
					this.markers = [];
					res.forEach((item, index) => {
						this.markers.push({
							id: item.veteransId,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: '/static/logo3.png',
							width: 30,
							height: 30,
							clickable: true,
							veteransName: item.veteransName,
							veteransTel: item.veteransTel,
							veteransIdcard: item.veteransIdcard,
							address: item.address
						})
					})
					if (this.markers[0]) {
						this.model.veteransName = this.markers[0].veteransName
						this.model.veteransTel = this.markers[0].veteransTel
						this.model.veteransIdcard = this.markers[0].veteransIdcard
						this.model.address = this.markers[0].address
					}
				})
			},
			// getFn() {
			// 	server.getNearby(this.id).then(res =>{
				// 	res.forEach((item, index) => {
				// 		this.markers.push({
				// 			id: item.veteransId,
				// 			latitude: item.latitude,
				// 			longitude: item.longitude,
				// 			iconPath: '/static/logo3.png',
				// 			width: 30,
				// 			height: 30,
				// 			clickable: true,
				// 			veteransName: item.veteransName,
				// 			veteransTel: item.veteransTel,
				// 			veteransIdcard: item.veteransIdcard,
				// 			address: item.address
				// 		})
				// 	})
				// 	if (this.markers[0]) {
				// 		this.model.veteransName = this.markers[0].veteransName
				// 		this.model.veteransTel = this.markers[0].veteransTel
				// 		this.model.veteransIdcard = this.markers[0].veteransIdcard
				// 		this.model.address = this.markers[0].address
				// 	}
				// })
			// },
			markertap(e) {
				console.log(e)
				console.log('this.markers', this.markers)
				this.markers.forEach(item => {
					if (e.detail.markerId === item.id) {
						this.model.veteransName = item.veteransName
						this.model.veteransTel = item.veteransTel
						this.model.veteransIdcard = item.veteransIdcard
						this.model.address = item.address
					}
				})
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safety {
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.model {
		width: 100%;
		height: 25%;
		position: absolute;
		left: 0upx;
		bottom: 0upx;
		background-color: #FFFFFF;
		z-index: 9999;
		padding: 0rpx 30rpx;
		.info {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			.img{
				width: 180rpx;
				height: 180rpx;
			}
			.info-data{
				width: 100%;
				padding-left: 20upx;
			}
			.info-title{
			}
			.info-text{
				padding-top: 10upx;
			}
			.info-shopsIntroduce{
				padding-top: 10upx;
				line-height: 40rpx;
				height: auto;
				overflow: visible;
			}
		}
	}
</style>