<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map  subkey='CQIBZ-P2MR5-PM3IB-QRKTX-SEVJE-GYF34' :showScale="false" :showLocation="true"  :showCompass="false" enableZoom="true" enableScroll="true" enableBuilding="true" enable3D="true" id="myMap" style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude"
					:markers="markers" :layerStyle="mapStyle"  @markertap='markertap' @updated="updated"
					@anchorpointtap='anchorpointtap'>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			markers: {
				type: Array,
				default: [{
						id: 1,
						latitude: 30.6034799,
						longitude: 104.1132550,
						// iconPath: "../../static/hch-position/门店.png",
						width: '38rpx',
						height: '40rpx',
						joinCluster: true, // 指定了该参数才会参与聚合
						callout: {
							content: "门店1号店",
							borderRadius: 10,
							padding: 5,
							display: "ALWAYS"
						}
					},
					{
						id: 2,
						latitude: 30.6318237,
						longitude: 104.0824970,
						width: '38rpx',
						height: '40rpx',
						// iconPath: "../../static/hch-position/门店.png",
						joinCluster: true, // 指定了该参数才会参与聚合
						callout: {
							content: "门店2号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS"
						}
					}
				]
			}
		},
		data() {
			return {
				latitude: 39.924361, //中心纬度
				longitude: 116.518557, //中心经度
				mapStyle: 1, //个性化地图
			}
		},

		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: {
			//	点击标记点时触发，e.detail = {markerId}
			markertap(e) {
				console.log('--->标记点', e.detail);
			},
			//点击定位标时触发，e.detail = {longitude, latitude}
			anchorpointtap(e) {
				console.log('---->定位点', e.detail);
			},

			//在地图渲染更新完成时触发的方法
			updated() {
				let _this = this
				wx.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},
			addMarkers() {
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			}
		},

		onShow() {},
		onReady() {}
	}
</script>

<style lang="scss" scoped>
	.content {
		text-align: center;
		height: 400rpx;
	}

	.page-section {
		z-index: 0;
	}

	.store-tips {
		width: 600rpx;
		height: 100rpx;
		margin: 10rpx auto;
		border-radius: 10rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 2;
		overflow: hidden;

		.store-des-box {
			background: #fff;
		}

		.store-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin: 10rpx;
			float: left;
		}

		.store-des {
			padding-top: 8rpx;
			float: left;
			line-height: 1;
			font-size: 22rpx;
			color: #666;
			padding-left: 20rpx;

			.store-name {
				font-weight: 600;
				color: deeppink;
			}
		}

		.store-clear {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 7rpx;
			right: 7rpx;
			margin: 30rpx;
		}
	}

	.address-icon {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		top: 22%;
		left: 50%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;
	}

	.near-num {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 17%;
		left: 50%;
		z-index: 2;
		font-size: 24rpx;
		background: #fff;
		transform: translate(-50%, 0);
	}
</style>
