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: [{
						marker:{
							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 {
				isisMarkering: false,
				isActiveMarker: 0,
				isActiveMarkerIndex: -1,
				latitude: 30.6034799,
				longitude: 104.1132550,
				mapStyle: 1, //个性化地图
				markersIn: [],
				isUpdate: false,
				painter:{
					wait: 0,
					base:{
						width: '42px',
						height: '48px',
						views:[
							{
								type: 'image',
								src: '../../static/icon/late02.png',
								css: {
									left: '0px',
									top: '0px',
									width: '42px',
									height: '48px',
								}
							},
							{
								type: 'image',
								src: '',
								css: {
									left: '3.5px',
									top: '2px',
									width: '35px',
									height: '35px',
									borderRadius: '17.5px'
								}
							}
						]
					},
					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){
				this.painter.base.views[1].src = imgUrl;
				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, mode = true, isQt = false) {
				
				
				let index = 0;
				if(typeof e.index !== 'undefined'){
					index = e.index;
				}else if(typeof e.index === 'undefined'){
					index = e.markerId;
				}	
				
				if(!isQt && (this.isActiveMarkerIndex === index || this.isMarkering)) return;
				this.isMarkering = true;
				setTimeout(()=>{
					this.isMarkering = false
				}, 200)
				const itemOld = this.markersIn[this.isActiveMarkerIndex];
				if(itemOld){
					itemOld.width = itemOld.noActive.width;
					itemOld.height = itemOld.noActive.height;
					itemOld.iconPath = itemOld.noActive.iconPath;
					itemOld.isActive = false;
					this.$set(this.markersIn, this.isActiveMarkerIndex, itemOld);
				}
				this.isActiveMarkerIndex = index;
				const item = this.markersIn[this.isActiveMarkerIndex];
				item.width = item.active.width;
				item.height = item.active.height;
				item.iconPath = this.painter.path;
				item.isActive = true;
				this.$set(this.markersIn, index, item);
				this.latitude = item.latitude
				this.longitude = item.longitude
				if(this.painter.wait != 0) return;
				this.generateImg(item.active.iconPath).then(()=>{
					// if(this.isActiveMarker != item.id) return;
					item.width = item.active.width;
					item.height = item.active.height;
					item.iconPath = this.painter.path;
					item.isActive = true;
					this.$set(this.markersIn, index, item);
				})
				mode&&this.$emit('moveToMarkId',index);
			},
			//点击定位标时触发，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)
					}
				})
			},
		},
		watch:{
			'markers': {
				handler(val,oldVal) {
					const temp = Object.assign(this.markers);
					this.markersIn = temp.map((item, index)=>{
						item.marker.id = index;
					    return item.marker;
					})
				},
			},
		}
	}
</script>

<style lang="scss" src="./hch.scss" scoped></style>