uniapp map组件自定义markers标记点

需求是根据后端返回数据在地图上显示标记点,并且根据数据状态控制标记点颜色,标记点背景通过两张图片实现控制

html 复制代码
<map
	style="width: 100vw; height: 100vh;"
	:markers="markers"
	:longitude="locaInfo.longitude"
	:latitude="locaInfo.latitude"
	@markertap="markerClick"
	@callouttap='callouttap'
	>
	<!-- 使用callout进行自定义 -->
	<cover-view slot="callout">
		<template v-for="(item,index) in markers"> 
			<cover-view 
			style="position: relative; width: 100%;padding-right: 20px;"
			:marker-id="item.id"
			:key='index'>
				<cover-view class="marker-box" style="padding: 5px 5px 12px 5px;">
					<cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;" :src="item.options.img"></cover-image>
					<cover-view>{{item.options.labelName}}</cover-view>
					
					<cover-image class="position-absolute" style="position: absolute; left: 0;top: 0; z-index: -1; width: 100%; height: 100%;" :src="item.options.isStore?item.options.active_bg:item.options.bg"></cover-image>
				</cover-view>
				<cover-view style="position: absolute; right: 0px; top: 50%; transform: translateY(-65%); z-index: 2 ; width: 16px; height: 16px; border-radius: 50%; background-color: aquamarine;"></cover-view>
			</cover-view>
		</template>
	</cover-view>
</map>
js 复制代码
<script>
	export default {
		data() {
			return {
				storeIndex:0,
				locaInfo: {
					longitude:120.445172,
					latitude:36.111387
				},
				markers: [ // 标点列表
					{
						id: 1, //标记点id
						index: 0,
						clusterId: 1, //自定义点聚合簇效果时使用
						latitude: 36.116874, // 纬度
						longitude: 120.441515, // 经度
						iconPath:  '/static/tm.png', 
						options: {
							isStore: true,
							img: '/static/store.png', 
							bg: '/static/1.png',
							active_bg: '/static/2.png',
							labelName: '恩豪斯',
							name: '建材城名称(蓝鳌路店)',
							address: '高新区大学路101号',
							time1: '2024-02-28  16:30'
						},
						// 自定义窗口
						customCallout: {
							anchorX: 0,
							anchorY: 0,
							display: "ALWAYS" // 常显
						}
					},
					{
						id: 2, //标记点id
						index: 1,
						clusterId: 1, //自定义点聚合簇效果时使用
						latitude: 36.110543, // 纬度
						longitude: 120.454837, // 经度
						iconPath: '/static/tm.png', 
						options: {
							isStore: false,
							img: '/static/store.png', 
							bg: '/static/1.png',
							active_bg: '/static/2.png',
							labelName: '恩豪斯1111',
							name: '品牌名称(所属建材城)',
							address: '高新区大学路101号',
							time1: '2024-02-28  16:30',
							time2: '2024-02-28  16:30',
						},
						// 自定义窗口
						customCallout: {
							anchorX: 0,
							anchorY: 0,
							display: "ALWAYS" // 常显
						}
					},
				],
			}
		},
		methods: {
			callouttap(e){ // 点击气泡
				console.log(e.detail);
			}
		}
	}
</script>
<style lang="scss">
	// 地图标记点
	.marker-box {
		position: relative;
		display: flex;
		// align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		overflow: visible; 
	}
	

</style>
相关推荐
无奈何杨5 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭13 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆16 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼26 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子28 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆28 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了29 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆34 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js