uniapp map自定义气泡窗

niceguyº2024-01-27 12:19

uniapp map自定义气泡窗

1、map

html 复制代码

<template>
	<view>
		<map class="map" :latitude="mapCenter.lat" :longitude="mapCenter.lng" :scale="5" :markers="mapData">
			<!--自定义冒泡-->
			<cover-view slot="callout">
				<cover-view v-for="(item,index) in mapData" :key="item.id" 
				class="map-item" :marker-id="item.id">
					<!--你的内容-->
				</cover-view>
			</cover-view>
		</map>
	</view>
</template>

2、数据

js 复制代码

	data(){
		return{
			mapCenter:{lat: 23.125178, lng: 113.280637},// 中心点
			mapData:[{ // 标记点
			 id:1, // 必填 number
			 latitude:23.125178,
			 longitude: 113.280637,
             width: 30, 
             height: 30,
             customCallout:{display: 'BYCLICK'},// BYCLICK 点击显示 ALWAYS 总是显示
             iconPath:'../../static/img/icon.png'
             }]
		}
	}

参考官网：https://uniapp.dcloud.net.cn/component/map.html#map