MinNan/index_fenbao/jianzhu/map_page.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="地图" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<map
			id="map"
			:enable-rotate="true"
			:enable-3D="true"
			:latitude="latitude"
			:longitude="longitude"
			:markers="marker"
			:scale="scale"
			@markertap="markertap"
			style="width: 100%; height: 100%"
		></map>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false, // 节流阀 默认为关闭状态
			main_body_id: '',
			model_id: '',
			marker: [],
			latitude: 24.511709899939145, //纬度
			longitude: 118.14707269879153, //经度
			scale: 13 //缩放级别,
		};
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		// this.model_id = o.id;
		this.ditu();
	},

	methods: {
		ditu(id) {
			this.$api.getContentList(
				{
					model_id: '1',
					main_body_id: '1',
					page: 1,
					pageSize: '12'
				},
				function (res) {
					that.marker = [];
					res.data.forEach((item, index) => {
						// console.log(item, 'itemitem');
						that.latitude = item.latitude;
						that.longitude = item.longitude;
						that.marker.push({
							id: parseFloat(item.id),
							latitude: parseFloat(item.latitude), //纬度
							longitude: parseFloat(item.longitude), //经度
							iconPath: '/static/image/icon_map.png', //显示的图标
							width: 35, //宽
							height: 35, //高
							joinCluster: true,
							title: item.title, //标注点名
							label: {
								//自定义标记点上方的文本
								content: item.title, //文本
								color: '#5c3c2e', //文字颜色
								fontSize: 20, //文本大小
								bgColor: 'rgba(0,0,0,.2)', // 背景颜色（半透明黑色）
								borderRadius: 10, // 边框圆角
								padding: [2, 2], // 内边距
								textAlign: 'center', // 文本对齐方式
								display: 'ALWAYS' // 始终显示标签
							}
						});
					});
				}
			);
		},
		// 点击标记点时触发
		markertap(e) {
			console.log(e);
			uni.navigateTo({
				url: `/index_fenbao/jianzhu/jianZhuXQ?id=${e.target.markerId}`
			});
		},
		// 建筑详情
		buildBtn(i) {
			uni.navigateTo({
				url: this.jianZhuList[i].page
			});
		}
	}
};
</script>

<style>
.body2 {
	width: 100%;
	height: 100%;
}

.banxin {
	margin: 0 32rpx 0 32rpx;
}
</style>