uni-app解决map组件层级问题

前言: renderjs永远的神, uniapp一般层级问题得以解决.

这里解决for循环内显示多个map问题, 不填写idname会只显示一张地图, 要添加区别的idname

引入

<template>
	<view style="width: 400upx;">
		<amap :lat="39.908775" :lng="116.397428" idname="map"></amap>
		<amap :lat="39.908775" :lng="116.397428" idname="map1"></amap>
		<!-- <view class="" style="position: fixed;left: 150upx;top: 150upx;">
			fixed属性等的样式可以直接展示在map上
		</view>
		<view class="">
			map的上下文样式代码
		</view> -->
	</view>
</template>

<script>
	import amap from '@/components/qzxmap/qzxmap.vue'
	export default {
		components:{
			amap
		},
	}
</script>

components文件目录结构

qzxmap.vue文件

<!-- 参考社区改写的 uni代码 https://ext.dcloud.net.cn/plugin?id=2783 -->
<template>
	<view class="qzx-map">
		<view :prop="markerList" :change="idname.updateEcharts" :id="idname" class="qzxmap"></view>
	</view>
</template>

<script>
	/*
		解决map层级问题, 使用render.js渲染
		这里地图组件中没有当前用户所在位置等的信息,主要用于展示经纬度位置所在地图
	*/
const start = 'static/start.png' // marker图片
const selectedStart = 'static/ITkoala-amap/selectedStart.png' //marker被选中图片
export default {
	props: {
		lat: {
			type: Number,
			default: 39.908775
		},
		lng: {
			type: Number,
			default: 116.397428
		},
		idname: {
		   type: String,
		   default: 'amap'
		}
	},
	data() {
		return {
			markerList: [
				{
					lat: this.$props.lat,
					lng: this.$props.lng,
					icon: start
				}
			],
			dataIndex: '',
			center: [this.$props.lng, this.$props.lat], // 中心点
		}
	},
	methods: {
		//地图点击回调事件
		onViewClick(params) {
			this.dataIndex = params.dataIndex
		}
	}
}
</script>

<script module="amap" lang="renderjs">
import config from './config.js'

export default {
	props: {
		idname: {
		   type: String,
		   default: 'amap'
		}
	},
	data() {
		return {
			map: null,
			ownerInstanceObj: null //service层对象
		}
	},
	mounted() {
		if (typeof window.AMap === 'function') {
			this.initAmap()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
			script.onload = this.initAmap.bind(this)
			document.head.appendChild(script)
		}
	},
	methods: {
		initAmap() {
			this.map = new AMap.Map(this.idname, {
				resizeEnable: true,
				center: this.center,// 地图center值
				layers: [ //使用多个图层
					// new AMap.TileLayer.Satellite() //使用卫星图
				],
				zooms: [4, 18], //设置地图级别范围
				zoom: 2
			})

			this.initMarkers()
		},
		//初始化标记点
		initMarkers() {
			let prevMarker = null
			let prevIcon = null
			this.markerList.forEach((item, index) => {

				if(!!item.icon){
					//添加点标记
					let marker = new AMap.Marker({
						position: new AMap.LngLat(item.lng, item.lat),
						offset: new AMap.Pixel(-13, -30),
						icon: item.icon
					})

					marker.on('click', (e) => {
						if(!!prevMarker){
							prevMarker.setIcon(prevIcon)
						}
						prevIcon = item.icon
						prevMarker = marker
						// marker.setIcon(selectedStart)
						this.dataIndex = index
						this.onClick(null,this.ownerInstanceObj)
					})

					this.map.add(marker)
				}

			})
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			this.ownerInstanceObj = ownerInstance
		},
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
			ownerInstance.callMethod('onViewClick', {
				dataIndex: this.dataIndex
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.qzxmap {
	width: 400upx;
	height: 200upx;
}

.infoWindow-wrap{
	  margin-left: 50px;
		color: #f00;
	}
</style>

config.js(这两个配置不打包可以先不填,我测了android和h5可以看到效果)

const config = {
	WEBAK: 'xxx',//填写自己的Web服务高德地图key值
	JSAPIAK: 'xxx'//填写自己的Web端(JS API)高德地图key值
}
export default config

// 效果自己跑,记得配置’static/start.png’ 图片
// 以上为全部代码
备注: 参考的社区demo改写的, 作者没写备注等问题, 我将他的demo改写封装了一下方便新人入坑, 欢迎指问题. 代码我上传 demo