uniapp 地图组件 地图展示后台商家列表数据

《uniapp 地图组件 地图展示后台商家列表数据》 官方组件  只做笔记，以后使用

 

<template>
	<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 22.820291,
				longitude: 108.370653,
				positions: [],
			}
		},
		onLoad() {
			// this.getStore();
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);

			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});

			this.addMarkers();
		},
		methods: {
			//获取商家列表
			getStore() {
				let that = this
				that.$api.request(that.route.club.store, {}, 'GET').then(res => {
					console.log(res, '商家列表');
					that.positions = res.data;
				});
			},
			addMarkers() {
				let that = this
				const marker = {
					id: 1,
					iconPath: '',
					width: 50,
					height: 50,
					joinCluster: true, // 指定了该参数才会参与聚合
					label: {
						width: 50,
						height: 30,
						borderWidth: 1,
						borderRadius: 10,
						bgColor: '#ffffff',
						content:''
					}
				};
				//请求后台列表数据
				that.$api.request(that.route.club.store, {}, 'GET').then(res => {
					console.log(res, '商家列表');
					that.positions = res.data;
					const markers = []
					console.log(that.positions, 'that.positions')
					that.positions.forEach((p, i) => {
						console.log(p, i, 'positions');
						const newMarker = Object.assign({}, marker, p)
						newMarker.id = p.id;
						newMarker.iconPath = p.thumb;
				     	newMarker.label.content = p.name;
						console.log(p.name, 'p.name');
						markers.push(newMarker)
					})
					that._mapContext.addMarkers({
				    markers,
				 	clear: false,
						complete(res) {
							console.log('addMarkers', res)
						}
					})
				});


			}
		}
	}
</script>

<style>
	.content {
		flex: 1;
	}

	.map {
		flex: 1;
		width: 100%;
		height: 90vh;
	}
</style>