uniapp map自定义气泡窗

最新推荐文章于 2024-08-23 17:40:24 发布

陈醋拌饭

最新推荐文章于 2024-08-23 17:40:24 发布

阅读量1.7k

点赞数 5

分类专栏： uni-app Vue 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_44167504/article/details/135847820

版权

Vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

uni-app

19 篇文章 0 订阅

订阅专栏

uniapp map自定义气泡窗

1、map

<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、数据

	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'
             }]
		}
	}