yicangzongtai_app_240321/pages/research/homepage/mapToPage.vue

<template>
	<view>
		<view class="title">
			<navbar :config="config"></navbar>
		</view>
		<map id="map1" :scale="1" ref="map1" style="width: 100%; height: calc(100vh - 44px);" :latitude="latitude" :longitude="longitude" :markers="markers" :enable-zoom="true"></map>
		</view>
</template>

<script>
export default {
	data() {
		return {
			config: {
				back: true, //false是tolbar页面 是则不写
				title: '加入我们-地图',
				color: '#1A1A1A',
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, '#ffffff'],
				statusBarFontColor: '#FFFFFF'
			},
			latitude: null,
			longitude: null,
			mainmap: null,
			markers: [],
			list:[],
			imgUrl: this.$mConfig.staticUrl
		};
	},
	computed: {},
	watch: {
		list(n) {
			if (n) {
				this.getMap();
			}
		}
	},
	created() {
		this.mainmap = uni.createMapContext('map1', this);
	},
	onLoad(option) {
		this.list=JSON.parse(option.list);
	},
	methods: {
		getMap() {
			let that = this
			this.longitude = this.list[0].tx_longitude;
			this.latitude = this.list[0].tx_latitude;
			let markers = [];
			this.list.forEach((val, index) => {
				markers.push({
					id: index,
					latitude: Number(val.tx_latitude),
					longitude: Number(val.tx_longitude),
					iconPath: that.imgUrl+'/map.png',
					width: 20,
					height: 20
				});
			});
			this.markers = markers;
		}
	}
};
</script>

<style></style>