uniapp地图兼容小程序和APP（高德地图），点击marker并弹框详情

最新推荐文章于 2024-10-17 16:32:57 发布
最新推荐文章于 2024-10-17 16:32:57 发布
阅读量1.5k 收藏 8
点赞数 7
文章标签： uni-app 小程序 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44705979/article/details/135466936
版权

1.uniapp地图页面兼容小程序和APP
2.小程序使用map组件APP使用高德地图
3.点击定位按钮地图自动移动到定位点
4.APP地图逻辑是视图层交互使用renderjs
5.点击地图marker弹框详情
6.全部代码

<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view style="position: relative;">
		<!-- 搜索框 -->
		<view>
			<tui-searchbar @search="handelSearch" @clear="handelCancel"></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 == 'T' ?'积水':'未积水'}}</view>
					</view>
					<view class="bottom-item">
						<view>
							<!-- <uv-icon name="photo" size="20"></uv-icon> -->
						</view>
						<view>是否倾倒</view>
						<view>{{state.mapDetail.tpOv == 'T' ?'倾倒':'未倾倒'}}</view>
					</view>
					<view class="bottom-item">
						<view>
							<!-- <uv-icon name="photo" size="20"></uv-icon> -->
						</view>
						<view>倾倒角度</view>
						<view>{{state.mapDetail.angle || 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>
		<!-- #ifdef MP-WEIXIN -->
		<map id="map" :latitude="state.latitude" :longitude="state.longitude" :markers="state.markers"
			:style="{ width: '100%', height: windowHeight + 'px' }" :scale="7" @markertap="markTap"></map>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view id="amap" :markerList="markerList" :change:markerList="amap.updateEcharts" :latlon="state.latlon"
			:change:latlon="amap.getLatlon" :style="{ width: '100%', height: windowHeight + 'px' }">
		</view>
		<!-- #endif -->
		<!-- 错误提示 -->
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>
<script>
	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 start = '/static/device_normal.png'
	export default {
		setup() {
			const {
				proxy
			} = getCurrentInstance()
			onReady(() => {
				uni.getSystemInfo({ //获取高度
					success: (res) => {
						windowHeight.value = res.windowHeight;
					},
				});
			})
			onShow(() => {
				nextTick(() => {
					console.log('地图页面加载')
					getList()
				})
			})
			const toast = ref(null); //获取提示dom
			const markerList = ref([])
			const originMarkerList = ref([])
			const dataIndex = ref('')

			const show = ref(false)
			const state = ref({
				markers: [],
				_mapContext: null,
				query: {
					capCode: '',
					current: 1,
					orgId: uni.getStorageSync('storage_data').userInfo.orgId,
					size: 100000
				},
				dataList: [],
				originDataList: [],
				latitude: 31.52853, //纬度
				longitude: 120.28429, //经度
				mapDetail: {},
				latlon: {
					latitude: '',
					longitude: '',
				}
			})


			const openRepairPage = () => {
				let id = state.value.mapDetail.deviceId
				uni.navigateTo({
					url: `/pages/device/detail?id=${id}`
				})
			}
			//地图搜索
			const handelSearch = (e) => {
				console.log('地图点击了搜索')
				console.log(e.value)
				console.log('地图点击了搜索')
				if (e.value == '') {
					toast.value.show({
						type: 'error',
						icon: false,
						duration: 3000,
						message: "搜索不能为空"
					})
					return false
				}
				//微信小程序
				// #ifdef MP-WEIXIN
				state.value.dataList = []
				state.value.originDataList.forEach((item) => {
					if (item.deviceName && item.deviceName.includes(e.value)) {
						state.value.dataList.push(item)
					}
				})
				addMarkers()
				// #endif
				//APP
				// #ifdef APP-PLUS
				markerList.value = []
				originMarkerList.value.forEach((item) => {
					if (item.deviceName && item.deviceName.includes(e.value)) {
						markerList.value.push(item)
					}
				})
				// #endif
			}

			//取消地图搜索
			const handelCancel = (e) => {
				console.log('点击了清空')
				// #ifdef MP-WEIXIN
				state.value.dataList = []
				state.value.dataList = state.value.originDataList
				addMarkers()
				// #endif

				// #ifdef APP-PLUS
				markerList.value = []
				markerList.value = originMarkerList.value
				// #endif
			}
			// 弹出
			const popRef = ref()
			const windowHeight = ref(0);
			const latitude = ref(23.09) //纬度
			const longitude = ref(113.32) //经度
			//点击marker
			const markTap = (e) => {
				console.log(e)
				show.value = true;
				// #ifdef APP-PLUS
				let deviceId = markerList.value[e].deviceId
				// #endif
				// #ifdef MP-WEIXIN
				let deviceId = state.value.dataList[e.detail.markerId].deviceId
				// #endif
				getBoltDetail(deviceId).then(res => {
					state.value.mapDetail = res.data
					//弹出弹框
					popRef.value.open()
				})
			}
			// 取消弹框
			const cancel = () => {
				show.value = false;
				popRef.value.close()
			}
			//导航
			const chooseLocations = () => {
				uni.openLocation({
					latitude: Number(state.value.mapDetail.latitude),
					longitude: Number(state.value.mapDetail.longitude),
					scale: 15
				});
			}


			/*获取定位*/
			const getLocation = () => {
				uni.showLoading({
					title: '定位中'
				})
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: function(res) {
						console.log(res)
						state.value.latitude = res.latitude
						state.value.longitude = res.longitude
						state.value.latlon.latitude = res.latitude
						state.value.latlon.longitude = res.longitude
						uni.hideLoading()
					},
					fail: function() {
						console.log('获取位置信息失败');
						uni.hideLoading()
					}
				});
				// #ifdef MP-WEIXIN
				let mapObjs = uni.createMapContext('map', this)
				mapObjs.moveToLocation({
					latitude: state.value.latitude,
					longitude: state.value.longitude
				}, {
					complete: res => {
						console.log('移动完成:', res)
					}
				})
				// #endif
			}
			//增加markers
			const addMarkers = () => {
				const positions = state.value.dataList.map((item, index) => {
					return {
						latitude: item.latitude || 31.61505,
						longitude: item.longitude || 120.34179,
						id: index,
						online: item.online
					}
				})
				const markers = []
				positions.forEach((p, i) => {
					markers.push(
						Object.assign({}, {
							id: p.id,
							iconPath: p.online == true ? "/static/device_normal.png" :
								"/static/device_offline.png",
							width: 35,
							height: 34,
							joinCluster: false, // 指定了该参数才会参与聚合
							// callout: {
							// 	bgColor: "#5AC2EB",
							// 	color: "#fff",
							// 	content: `消防栓${p.id}`,
							// 	display: "ALWAYS",
							// 	fontSize: "14",
							// 	fontWeight: "bold",
							// 	padding: 8,
							// 	textAlign: "center"
							// },
						}, p)
					)
				})
				state.value.markers = markers
				// state._mapContext.addMarkers({
				// 	markers,
				// 	clear: false,
				// 	complete(res) {
				// 		// console.log('addMarkers', res)
				// 	}
				// })
			}
			/*获取列表数据*/
			const getList = () => {
				getMapList(uni.getStorageSync('storage_data').userInfo.orgId).then(res => {
					// #ifdef APP-PLUS
					markerList.value = res.data.devices || []
					originMarkerList.value = res.data.devices || []
					// #endif

					// #ifdef MP-WEIXIN
					state.value.dataList = res.data.devices || []
					state.value.originDataList = res.data.devices || []
					if (state.value.dataList.length > 0) {
						//将数据渲染到地图
						addMarkers()
					}
					// #endif
				})
			}
			// 下拉刷新
			onPullDownRefresh(() => {
				// loadData(true)
			})
			// 上拉加载
			onReachBottom(() => {
				// loadData()
			})
			const clickMsg = (item) => {
				uni.navigateTo({
					url: `/pages/msg/detail?id=${item.id}&createTime=${item.createTime}`
				})
			}
			//renderjs点击地图回调
			const onViewClick = (val) => {
				markTap(val)
			}
			return {
				markerList,
				getList,
				onViewClick,
				windowHeight,
				markTap,
				state,
				popRef,
				cancel,
				chooseLocations,
				openRepairPage,
				show,
				getLocation,
				addMarkers,
				handelSearch,
				toast,
				originMarkerList,
				handelCancel
			}
		}
	}
</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,
				latlon: {}
			}
		},
		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() {
				let lat = 120.34179
				let lon = 31.61505
				if (this.latlon && this.latlon.latitude) {
					lon = Number(this.latlon.latitude)
					lat = Number(this.latlon.longitude)
				}
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					// center: [120.34179, 31.61505],
					center: [lat, lon],
					// 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) => {

					if (item.online == true) {
						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/1743806358433562626.png', // 设置图标样式
							imageOffset: new AMap.Pixel(0, 0), // 设置图标偏移
							imageSize: new AMap.Size(35, 34) // 设置图标尺寸
						});
					} else {
						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.deviceId
					})

					marker.on('click', (e) => {
						that.dataIndex = index
						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()
			},
			//监听逻辑层传递过来的经纬度
			getLatlon(newValue) {
				console.log('renderjs值发生了变化')
				this.latlon = newValue
				this.initAmap()
			},
			onClick() {
				console.log('传值给service层')
				// 调用 service 层的方法
				this.$ownerInstance.callMethod('onViewClick', this.dataIndex)
			}
		}

	}
</script>
<style lang="scss" scoped>
	.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: 0%;
					}

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

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

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

7.效果
在这里插入图片描述

大力水手~
关注
uniapp - [安卓|苹果]实现App端引入高德地图，详细获取当前用户手机定位、两个地点的路线规划及相关示例代码，uniapp安卓Android平台软件下使用高德地图，获取当前位置信息及规划路线
高级前端工程师
02-20 3815
uniapp，高德地图，安卓app端，苹果ios系统端，安卓苹果app，高德地图路线规划，uniapp app高德地图，获取当前位置信息，获取用户当前定位，uniapp软件APP如何使用高德地图并获取用户位置，uniapp实现获取用户位置信息（经纬度），通过高德地图和腾讯地图解析，uniapp开发APP使用高德实现定位，uniapp使用高德地图路径规划，uniapp使用高德地图定位打包成安卓app，引入高德地图报错不显示怎么办，高德地图位置无法获取，出现报错警告错误，规划路线，如何使用高德规划路线两个地点的
uniapp中使用高德地图，进行marker标点，点信息展示，支持app端
热门推荐
liuwenjie_的博客
05-10 1万+
uniapp、uniapp使用高德地图，app开发，安卓开发使用地图、高德地图、renderJs、地图标点、地图点信息展示、数据交互
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能
04-29
Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
【uniapp】 微信小程序--高德地图选取位置
m0_74094484的博客
09-29 737
用高德api制作地图选点功能
uniapp使用地图map 点击marker出现弹窗
LJ_James_的博客
12-21 1517
【代码】uniapp使用地图map 点击marker出现弹窗。
uniapp 之 将marker 渲染在地图上 点击弹层文字时显示当前信息
HQ\(^o^)/的博客
04-19 4122
而 mapList 里面的 stationId 为 字符串 类型 ，因此这要做个类型转换，若不转换的话，点击所有的 气泡，卡片上面的内容 是显示一样的。因为我这数据是用分页处理 若是 使用index，会有重复的id，会导致在缩放地图时 有些 marker 消失，this.getStationList() 这个请求先执行，后打印经纬度，这时请求里的经纬度 就为空，是我封装的组件， v-if=“tag” 默认不显示，当我点击气泡时出现的 卡片信息。，这个文件帮我们把用户的经纬度存储起来了，我们只需 取就行。
uniapp 小程序 map地图点击markers显示数据
m0_72543737的博客
08-13 334
this.selectedMarkerData里就是自己要取得数据了。把数据在uni.getLocation里定义好arr[i]里面获取。在定义好的tapMap事件里面写逻辑。在data里面定义数据。
uni-app使用高德地图
Wangreport的博客
07-04 4318
高德地图api的使用
uniapp map组件自定义markers标记点
qq_44161722的博客
07-23 1609
需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制。
高德地图-自定义点击弹框（气泡）
06-17
在使用高德地图进行开发时，自定义点击弹框（气泡）是一个常见的需求，它能够为用户提供丰富的信息展示和交互体验。本文将详细介绍如何在高德地图API中实现这一功能，以及结合提供的GDMapPopup文件，我们可以进一步...
【小程序地图】uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。
weixin_48596030的博客
06-22 8736
uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。
单击获取markerid
10-29
高德地图单击获取markerid通过单击每一个markerid来获取他的事件，实现循环添加marker单击事件，得到markerid
微信小程序基于高德地图查找位置并显示文字
10-16
在微信小程序开发中，有时我们需要集成地图功能，例如利用高德地图API来查找位置并显示相关的文字信息。本文将详细讲解如何实现这一功能。 首先，要实现基于经纬度在地图上查找定位，我们需要引入高德地图的小程序...
uniapp map地图实现marker聚合点，并点击marker触发事件
weixin_44705979的博客
10-20 3910
【代码】uniapp map地图实现marker聚合点，并点击marker触发事件。
uniapp地图标记点的点击事件
精通前端技术，了解后端接口
01-10 1732
就如途中的markerid就是数据中的id，通过这个markerid获取指定的经纬度。首先设置点击事件@markertap事件，然后他有个自带的（e）参数。然后covers中要有个id，这样才能获取到对应的经纬度，
uniapp 展示地图，并获取当前位置信息（精确位置）
逆风优雅的博客
06-12 1613
根据获取到的经纬度 获取 位置信息(此处使用的是 高德地图的位置服务，通过高德地图的逆地理位置解析，获取定位到的经纬度的 位置信息)使用uniapp 提供的map标签。页面初始化的时候，获取当前的位置信息。
UNIAPP点击markers显示相应的详细数据
m0_52993798的博客
10-23 408
所以我们嘚自己定义一个orderdetail来封装相应的属性，然后通过参数传进来的markerid关联订单id接着在markers遍历查找相应的数据，话不多说上代码。根据文档我们知道点击marker有个maekertap事件，并且传进来的参数就是marker本身。我这里订单数据量是比较少的所以采用遍历的办法，如果大伙有更好的方法可以贴给我^^但是由于自身业务要求，我这需要的属性marker是基本没有的。我这的需求是点击相应的订单marker，显示相应订单的数据。
uniapp中小程序引入高德地图
最新发布
weixin_59980129的博客
10-17 417
b.引入依赖：import amap from "@/utils/amap-wx.130.js";a.下载依赖：npm install @amap/amap-jsapi-loader。console.log("错误信息", err);key: XXXX, //高德地图官方申请的key。
uniapp内置腾讯地图实现地图大量markers点聚合，轨迹回放开始暂停，兼容H5及小程序
weixin_42826247的博客
09-14 2698
腾讯地图，uniapp，小程序，兼容H5，安卓，鸿蒙，IOS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值