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

<template>
	<view style="height:100%;">
		<view class="page-body" style="height:100%;">
			<view class="page-section page-section-gap" style="height:100%;">
				<map scale="9"  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: 100%;"
					:latitude="innerGeo.latitude" 
					:longitude="innerGeo.longitude"
					:markers="markersIn" 
					:layerStyle="mapStyle"  
					@markertap='markertap'
					@anchorpointtap='anchorpointtap'
					@updated="rendered"
				>
				</map>
			</view>
			
			<lPainter
				style="position: fixed;left:0px;top: -500px;"
				isRenderImage
				:board="painter.base"
				@success="canvasSuccess"
				@fail="canvasFail"
			/>
		</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)"
							}
						},
					},
				]
			},
			geo:{
				type: Object,
				default:{
					latitude:30.6034799,
					longitude:104.1132550,
				}
			}
		},
		data() {
			return {
				updateMode: true,
				isisMarkering: false,
				isActiveMarker: 0,
				isActiveMarkerIndex: -1,
				innerGeo:{
					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);
			this.innerGeo = Object.assign(this.geo)
			// 仅调用初始化，才会触发 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.innerGeo = {
					latitude:la,
					longitude:lo
				}
			},
			//	点击标记点时触发，e.detail = {markerId}
			markertap(index, mode = true, isQt = false) {	
				this.updateMode = mode
				if(typeof index == 'object'){
					index = index.markerId
				}
				if(!isQt){
					if(this.painter.wait != 0) return;
					if(this.isActiveMarkerIndex === index) return;
				}
				
				if(this.markersIn[this.isActiveMarkerIndex]){
					this.markersIn[this.isActiveMarkerIndex].width = '34rpx';
					this.markersIn[this.isActiveMarkerIndex].height = '40rpx';
					this.markersIn[this.isActiveMarkerIndex].iconPath = '../../static/icon/late02.png';					
				}
				
				this.isActiveMarkerIndex = index;
				this.innerGeo = {
					latitude: this.markersIn[this.isActiveMarkerIndex].latitude,
					longitude: this.markersIn[this.isActiveMarkerIndex].longitude
				}
				
				this.painter.wait = 1;
				this.painter.base.views[1].src = this.markersIn[this.isActiveMarkerIndex].activeIconPath + `?v=${(new Date()).getTime()}`
				console.log(this.painter.base.views[1].src)
				// this.$set(this.painter.base.views, 2, {
				// 	type: 'image',
				// 	src: this.markersIn[this.isActiveMarkerIndex].activeIconPath,
				// 	css: {
				// 		left: '3.5px',
				// 		top: '2px',
				// 		width: '35px',
				// 		height: '35px',
				// 		borderRadius: '17.5px'
				// 	}
				// })
			},
			canvasSuccess(e){
				if(this.isActiveMarkerIndex == -1)return;
				this.markersIn[this.isActiveMarkerIndex].width = '82rpx';
				this.markersIn[this.isActiveMarkerIndex].height = '90rpx';
				this.markersIn[this.isActiveMarkerIndex].iconPath = e;
				this.markersIn = Object.assign(this.markersIn);
				this.painter.wait=0;
				uni.vibrateShort({});
				this.updateMode&&this.$emit('moveToMarkId',this.isActiveMarkerIndex);
			},
			canvasFail(){
				if(this.isActiveMarkerIndex == -1)return;
				this.markersIn[this.isActiveMarkerIndex].width = '80rpx';
				this.markersIn[this.isActiveMarkerIndex].height = '90rpx';
				this.markersIn[this.isActiveMarkerIndex].iconPath = "";
				this.markersIn = Object.assign(this.markersIn);
				this.painter.wait=0
				uni.vibrateShort({});
				this.updateMode&&this.$emit('moveToMarkId',this.isActiveMarkerIndex);
			},
			//点击定位标时触发，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)
					}
				})
			},
			updateContent(hotelList,mode=false){
				const temp = Object.assign(hotelList);
				if(mode){
					this.markersIn = temp.map((item, index)=>{
						item.marker.id = index;
						return item.marker;
					})
				}else{
					const conpentate = this.markersIn.length;
					this.markersIn.push(...temp.map((item, index)=>{
						item.marker.id = index + conpentate;
						return item.marker;
					}))
				}
			},
			rendered(){
				if(this.markersIn.length > 0){
					this.$emit('rendered');
				}
			}
		},
		watch:{
			'geo':{
				handler(v){
					this.innerGeo = Object.assign(this.geo)
				},
			}
		}
	}
</script>

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