uniapp开发APP使用高德地图和renderjs注意点踩坑点

1.先调用逻辑层再加载视图层
2.目前不支持script setup 写法因为视图层向逻辑层传递数据setup写法逻辑层会接收不到视图层的数据this.$ownerInstance.callMethod回调会拿不到

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view style="position: relative;">
		<!-- 搜索框 -->
		<view>
			<tui-searchbar></tui-searchbar>
		</view>
		<!-- 定位图标 -->
		<view class="location" @click="getLocation">
			<tui-icon name="position" color="#ffffff" size="25"></tui-icon>
		</view>
		<!-- 弹出层 -->
		<uv-popup ref="popRef" mode="bottom" bg-color="null" :round="true" z-index="99" @maskClick="cancel">
			<view class="bottom-popup">
				<view class="bottom-title">
					<view>{{state.mapDetail.deviceName}}</view>
					<view @click="cancel">
						<tui-icon name="shut" color="#ffffff" size="30"></tui-icon>
					</view>
				</view>
				<view class="bottom-content">
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>上报时间</view>
						<view>{{state.mapDetail.lastReportTime}}</view>
						<view class="btns" @click="openRepairPage()">
							详情
						</view>
					</view>
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>设备状态</view>
						<view>{{state.mapDetail.online ?'在线':'离线'}}</view>
					</view>
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>电池电源</view>
						<view>{{state.mapDetail.charge || 0}}V</view>
					</view>
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>开阀状态</view>
						<view>{{state.mapDetail.controlSwitchState?'开':'关'}}</view>
					</view>
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>倾斜状态</view>
						<view>{{state.mapDetail.pond || 0}}°</view>
					</view>
					<view class="bottom-item">
						<view>
							<uv-icon name="photo" size="20"></uv-icon>
						</view>
						<view>水压</view>
						<view>{{state.mapDetail.waterPressure || 0}}MPa</view>
						<view class="btns" @click="chooseLocations">
							导航
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<!-- <map id="map" :latitude="state.latitude" :longitude="state.longitude" :markers="state.markers"
			:style="{ width: '100%', height: windowHeight + 'px' }" :scale="7" @markertap="markTap"></map> -->
		<!-- <view id="bmap" :style="{ width: '100%', height: windowHeight + 'px' }"></view> -->
		<view id="amap" :markerList="markerList" :change:markerList="amap.updateEcharts"
			:style="{ width: '100%', height: windowHeight + 'px' }">
		</view>

	</view>
</template>
<script>
	const start = '/static/device_normal.png'
	import {
		nextTick,
		reactive,
		ref,
		getCurrentInstance
	} from "vue"
	import {
		userLoginUnreadMessagePage
	} from '@/api/sys/userCenterApi'
	import {
		getMapList,
		getFilterList,
		getBoltDetail
	} from '@/api/map/index.js'
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import moment from 'moment'
	const {
		proxy
	} = getCurrentInstance()
	export default {
		setup() {
			onReady(() => {
				uni.getSystemInfo({ //获取高度
					success: (res) => {
						windowHeight.value = res.windowHeight;
					},
				});

				// state._mapContext = uni.createMapContext("map", proxy);
				// cluster()
				// getList()
			})
			onShow(() => {
				nextTick(() => {
					console.log('地图页面加载')
					getList()
				})
			})
			const markerList = ref([])
			const dataIndex = ref('')
			const getMapData = () => {
				console.log('获取了值')
				markerList.value = [{
						id: 1,
						lat: 31.61505,
						lng: 120.34179,
						icon: '/static/device_normal.png'
					},
					{
						id: 2,
						lat: 39.973253,
						lng: 116.473195,
						icon: '/static/device_normal.png'
					},
					{
						id: 3,
						lat: 39.953253,
						lng: 116.453195,
						icon: '/static/device_normal.png'
					}
				]
			}
			const show = ref(false)
			const state = reactive({
				markers: [],
				_mapContext: null,
				query: {
					capCode: '',
					current: 1,
					orgId: uni.getStorageSync('storage_data').userInfo.orgId,
					size: 100000
				},
				dataList: [],
				latitude: 31.61505, //纬度
				longitude: 120.34179, //经度
				mapDetail: {}
			})
			const openRepairPage = () => {
				let id = state.mapDetail.deviceId
				uni.navigateTo({
					url: `/pages/device/detail?id=${id}`
				})
			}
			// 弹出
			const popRef = ref()
			const windowHeight = ref(0);
			const latitude = ref(23.09) //纬度
			const longitude = ref(113.32) //经度
			const msg = 'ccccccccccc'
			//点击marker
			const markTap = (val) => {
				show.value = true;
				console.log('点击了地图的marker')
				let deviceId = markerList.value[val].deviceId
				getBoltDetail(deviceId).then(res => {
					console.log(res)
					state.mapDetail = res.data
					//弹出弹框
					popRef.value.open()

				})
			}
			// 取消弹框
			const cancel = () => {
				show.value = false;
				popRef.value.close()
			}
			//导航
			const chooseLocations = () => {
				uni.openLocation({
					latitude: Number(state.mapDetail.latitude),
					longitude: Number(state.mapDetail.longitude),
					scale: 15
				});
			}
			/*获取定位*/
			const getLocation = () => {
				uni.showLoading({
					title: '定位中'
				})
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: function(res) {
						console.log('当前位置的经度为：' + res.longitude);
						console.log('当前位置的纬度为：' + res.latitude);
						state.latitude = res.latitude
						state.longitude = res.longitude
						uni.hideLoading()
					},
					fail: function() {
						console.log('获取位置信息失败');
						uni.hideLoading()
					}
				});
			}
			/*获取列表数据*/
			const getList = () => {
				getMapList(uni.getStorageSync('storage_data').userInfo.orgId).then(res => {
					markerList.value = res.data.devices || []
					console.log('ccc')
					console.log(markerList.value)
					console.log('ccc')
				})
			}
			onShow(() => {
				// loadData(true)
				// getList()
				// init()
			})
			// 下拉刷新
			onPullDownRefresh(() => {
				// loadData(true)
			})
			// 上拉加载
			onReachBottom(() => {
				// loadData()
			})
			const clickMsg = (item) => {
				uni.navigateTo({
					url: `/pages/msg/detail?id=${item.id}&createTime=${item.createTime}`
				})
			}
			const getlocation = (opt) => {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '获取信息中'
					});
					uni.getLocation({
						// map组件默认为国测局坐标gcj02，调用 uni.getLocation返回结果传递给组件时，需指定 type 为 gcj02
						type: 'gcj02',
						geocode: true,
						success: function(data) {
							resolve(data)
							console.log(data)
						},
						fail: function(err) {
							reject(err)
						},
						complete() {
							uni.hideLoading();
						}

					})

				})

			};
			
			const init = () => {
				console.log('init')
				getlocation().then(res => {
					console.log(res)
					// t.latitude = res.latitude
					// t.longitude = res.longitude
				}).catch(err => {
					console.log(err)

				})

			}
			//renderjs点击地图回调
			const onViewClick = (val) => {
				console.log('地图回调')
				console.log(val)
				console.log('地图回调')
				markTap(val)
			}
			//变量值的调用需要写a.value
			return {
				markerList,
				getList,
				onViewClick,
				windowHeight,
				markTap,
				state,
				popRef,
				cancel,
				chooseLocations,
				openRepairPage
			}
		}
	}
</script>

<script lang="renderjs" module="amap">
	export default {
		data() {
			return {
				show: false,
				ownerInstanceObj: null, //service层对象
				state: {
					markers: [],
					_mapContext: null,
					query: {
						capCode: '',
						current: 1,
						orgId: 123,
						size: 100000
					},
					dataList: [],
					latitude: 31.61505, //纬度
					longitude: 120.34179, //经度
					mapDetail: {}
				},
				popRef: '',
				windowHeight: 0,
				latitude: 23.09,
				longitude: 113.32,
				map: null,
				markerList: [],
				dataIndex: 0
			}
		},
		mounted() {//先加载逻辑层再加载数据层 在监听回调里初始化地图
			console.log('mounted~~~~~~~~~~~~~~~`')
			// this.init()
		},
		methods: {
			// 引入高德地图SDK
			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', {
					resizeEnable: true,
					center: [120.34179, 31.61505],
					// zooms: [14, 20], //设置地图级别范围
					zoom: 15,
				})
				this.map.on('complete', () => {
					console.log('加载完成')
					this.initMarkers()
				})
			},
			initMarkers() {
				let that = this;
				let prevMarker = null
				let prevIcon = null
				console.log('初始化markder')
				var blueIcon = new AMap.Icon({
					size: new AMap.Size(35, 34), // 设置图标大小
					image: 'https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800', // 设置图标样式
					imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
					imageSize: new AMap.Size(35, 34) // 设置图标尺寸
				});
				this.markerList.forEach((item, index) => {
					//添加点标记
					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.deviceId
					})

					marker.on('click', (e) => {
						// if (prevMarker) {
						// 	prevMarker.setIcon(prevIcon)
						// }
						// prevIcon = icon
						// prevMarker = marker
						// marker.setIcon(selectedStart)
						// this.dataIndex = index
						// this.onClick(this.ownerInstanceObj)
						console.log('点击了marker')
						// console.log(e.data.title)
						that.dataIndex = index
						console.log(this.dataIndex)
						console.log('点击了marker')
						that.onClick(that.ownerInstanceObj)
					})

					this.map.add(marker)


				})
			},
			//监听逻辑层传递过来的数据
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				console.log('renderjs值发生了变化')
				this.markerList = newValue
				this.ownerInstanceObj = ownerInstance
				// 监听 service 层数据变更
				// this.ownerInstanceObj = ownerInstance
				// this.initMarkers()
				// this.initAmap()
				this.init()
			},
			onClick() {
				console.log('传值给service层')
				// 调用 service 层的方法
				this.$ownerInstance.callMethod('onViewClick', this.dataIndex)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100vw;
		height: 500px;
	}

	.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;
	}

	.bottom-popup {
		// height: 500px;

		z-index: 100;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		overflow: hidden;

		.bottom-title {
			width: 100%;
			background: #0079FE;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			box-sizing: border-box;
			align-items: center;
			font-size: 20px;
			height: 50px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			overflow: hidden;
		}

		.bottom-content {
			width: 100%;
			background-color: #FFFFFF;

			.bottom-item {
				display: flex;
				width: 100%;
				font-size: 16px;
				align-items: center;
				padding: 10px 20px;

				>view {
					&:nth-child(1) {
						width: 10%;
					}

					&:nth-child(2) {
						width: 20%;
					}

					&:nth-child(3) {
						width: 40%;
						height: 21px;
					}
				}

				.btns {
					background: #0079FE;
					color: #ffffff;
					border-radius: 20px;
					height: 30px;
					width: 60px;
					text-align: center;
					line-height: 30px;
					margin-left: 20px;
				}
			}
		}
	}
</style>