IHG/components/hch-position/hch-position.vue

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map  scale="10"  ubkey='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="markersIn" 
					:layerStyle="mapStyle"  
					@markertap='markertap'
					@anchorpointtap='anchorpointtap'
				>
				</map>
			</view>
			
			<lPainter
				style="position: fixed;left:0px;top: -500px;"
				isRenderImage
				:board="painter.base"
				@success="(e)=>{painter.path = e; painter.wait=0}"
			/>
		</view>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/index.vue'
	
	export default {
		components:{
			lPainter
		},
		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",
							transform: "tranlateY(20px)"
						}
					},
				]
			}
		},
		data() {
			return {
				latitude: 30.6034799,
				longitude: 104.1132550,
				mapStyle: 1, //个性化地图
				markersIn: [],
				isUpdate: false,
				painter:{
					wait: 0,
					base:{
						width: '94rpx',
						height: '110rpx',
						radius: "100rpx",
						views:[
							{
								type: 'image',
								src: '../../static/icon/late02.png',
								css: {
									left: '0rpx',
									top: '0rpx',
									width: '90rpx',
									height: '100rpx',
								}
							},
							{
								type: 'image',
								src: '',
								css: {
									left: '10rpx',
									top: '8rpx',
									width: '70rpx',
									height: '70rpx',
									borderRadius: '30rpx'
								}
							}
						]
					},
					path:""
				},
			}
		},

		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: {
			goLocation(la,lo){
				this.latitude = la
				this.longitude = lo
			},
			//生成图片
			generateImg(imgUrl){
				if(this.painter.wait != 0) return new Promise();
				this.painter.show = false;
				this.painter.base.views[1].src = imgUrl;
				this.painter.show = true;
				this.painter.wait = 1;
				
				return new Promise(resolve=>{
					let timer = setInterval(()=>{
						if(this.painter.wait === 0){
							clearInterval(timer);
							resolve(this.painter.path);
						}else if(this.painter.wait <= 3000){
							this.painter.wait += 10
						}else{
							clearInterval(timer);
							this.painter.wait = 0;
							resolve(this.painter.path);
						}
					}, 10);
				})
			},
			//	点击标记点时触发，e.detail = {markerId}
			markertap(e) {
				this.markersIn.forEach((item,index) => {			
					if(e.markerId === item.id){		
						this.generateImg(item.active.iconPath).then(()=>{
							item.width = item.active.width;
							item.height = item.active.height;
							item.iconPath = this.painter.path;
							item.isActive = true;
							console.log(item.latitude,item.longitude)
							this.latitude = item.latitude
							this.longitude = item.longitude
							this.$set(this.markersIn, index, item);
							this.addMarkers()
						})
						return;
					}else if(item.isActive){
						item.width = item.noActive.width;
						item.height = item.noActive.height;
						item.iconPath = item.noActive.iconPath;
						item.isActive = false;
						this.$set(this.markersIn, index, item);
						this.addMarkers()
					}
				})				
				
				this.isUpdate = false
				this.$emit('moveToMarkId',e.markerId)
			},
			//点击定位标时触发，e.detail = {longitude, latitude}
			anchorpointtap(e) {
				console.log('---->定位点', e.detail);
			},
			addMarkers() {
				this._mapContext.addMarkers({
					markers: this.markersIn,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
		},

		onShow() {
			this.markersIn = this.markers;
		},
		watch:{
			'markers': {
				handler(val,oldVal) {
					this.markersIn = this.markers;
				},
				// immediate: true
			}
		}
	}
</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>