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,
				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){
				if(this.painter.wait != 0) return new Promise();
				// this.painter.show = false;
				// this.painter.base.views[1].src = "https://zhengda.oss-cn-chengdu.aliyuncs.com/golf/images/15.png";
				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, mode = true) {
				if(this.isActiveMarker === e.markerId || this.isMarkering) return;	
				this.isMarkering = true;
				setTimeout(()=>{
					this.isMarkering = false
				}, 200)
				this.markersIn.forEach((item,index) => {
					if(e.markerId === item.id){
						this.isActiveMarker = item.id;
						item.iconPath = "";
						item.width="34rpx";
						item.height = "46rpx";
						this.latitude = item.latitude
						this.longitude = item.longitude
						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);
						})
						this.isUpdate = false
						mode&&this.$emit('moveToMarkId',e.markerId)
					}else if(item.isActive||item.iconPath != item.noActive.iconPath){
						item.width = item.noActive.width;
						item.height = item.noActive.height;
						item.iconPath = item.noActive.iconPath;
						item.isActive = false;
						this.$set(this.markersIn, index, item);
					}
				})
			},
			//点击定位标时触发，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) {
					this.markersIn = this.markers.map(item=>{
					    return item.marker;
					})
				},
			},
		}
	}
</script>

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