uni-app APP端map组件 marker自定义弹框组

最近用uni-app 在写地图方面的需求 ，主要是自定义 弹框组，由于uni-app 的map组件对APP端适配的不好，在H5上正常运行，但是在APP端就莫名其妙的有问题，所以就用renderjs实现，代码如下

<template>
	<view>
		<view class="location" @click="getLocation">
			<image style="width: 50rpx; height: 50rpx;" src="/static/image/home/storeIcon.png" mode=""></image>
		</view>
		<view id="amap" :markerList="markerList" :change:markerList="amap.updateEcharts" :latlon="latlon"
			:change:latlon="amap.getLatlon" :style="{ width: '100%', height: 800 + 'px' }">
		</view>
		<uni-popup ref="popRef">
			<view class="popup-content">
				<view>{{makerInfo.latitude}}</view>
				<view>{{makerInfo.longitude}}</view>
				<view>{{makerInfo.name}}</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				markerList: [{
					online: true,
					latitude: 34.257674,
					longitude: 108.951027,
					name: 'play-house'
				}],
				latlon: {
					latitude: '',
					longitude: '',
				},
				makerInfo: {}
			}
		},
		methods: {
			getLocation() {
				uni.showLoading({
					title: '定位中'
				})
				let that = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: function(res) {
						that.markerList.unshift({
							online: true,
							latitude: res.latitude,
							longitude: res.longitude,
							name: '目前的位置'
						})
						that.latlon = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						uni.hideLoading()
					},
					fail: function() {
						console.log('获取位置信息失败');
						uni.hideLoading()
					}
				});
			},
			onViewClick(idx) {
				this.makerInfo = this.markerList[idx]
				this.$refs.popRef.open('center')
			}
		}
	}
</script>


<script lang="renderjs" module="amap">
	export default {
		data() {
			return {
				show: false,
				ownerInstanceObj: null, //service层对象
				map: null,
				markerList: [],
				dataIndex: 0,
				latlon: {}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				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=高德地图key;
					script.onload = this.initAmap.bind(this);
					document.head.appendChild(script);
				}
			},
			initAmap() {
				
				this.map = new AMap.Map('amap', {
					center: [this.markerList[0].longitude, this.markerList[0].latitude],
					zoom: 15,
				})
				//卫星图配置
				// var satelliteLayer = new AMap.TileLayer.Satellite();
				// this.map.add([satelliteLayer]);
				this.map.on('complete', () => {
					this.initMarkers()
				})
			},
			initMarkers() {
				let that = this;
				this.markerList.forEach((item, index) => {
					var blueIcon = new AMap.Icon({
						size: new AMap.Size(35, 34), // 设置图标大小
						image: 'https://fh-platform-test.obs.cn-east-3.myhuaweicloud.com/2024/1/7/1743806505389391873.png', // 设置图标样式
						imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
						imageSize: new AMap.Size(35, 34) // 设置图标尺寸
					});
					//添加点标记
					let marker = new AMap.Marker({
						position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
						icon: blueIcon,
						draggable: true, // 设置 marker 可拖拽
						// zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
						title: item.name
					})
					marker.on('click', (e) => {
						that.dataIndex = index
						that.onClick(that.ownerInstanceObj)
					})

					this.map.add(marker)

				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				this.markerList = newValue
				this.ownerInstanceObj = ownerInstance
				this.init()
			},
			getLatlon(newValue) {
				this.latlon = newValue
				this.initAmap()
			},
			onClick() {
				this.$ownerInstance.callMethod('onViewClick', this.dataIndex)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-content {
		width: 500rpx;
		height: 500rpx;
		background-color: #fff;
	}

	.location {
		width: 35px;
		height: 35px;
		background: #0079FE;
		display: flex;
		justify-content: center;
		border-radius: 50%;
		align-items: center;
		position: absolute;
		bottom: 100px;
		right: 30px;
		z-index: 55;
	}
</style>