uniapp map 自定义标注customCallout

本Demo只适用于uniapp 开发的微信小程序

阅读前请先阅读这一篇，有助于理解不同虚拟机显示效果不同的问题 承接上篇文章： 老规矩：先上图

直接上代码：

<template>
	<view class="base_body">
		<map :markers="markers" id="map1" style="width: 100%; height: 70%;" :latitude="latitude" :longitude="longitude">
			<cover-view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view class="content">
							<view>随意指定</view>
							{
          
   {
          
   item.title}}
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>

	</view>
</template>

<script>
	export default {
          
   
		data() {
          
   
			return {
          
   
				map: ,
				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度

				markers: [{
          
    // 标记点
					id: 1,
					latitude: 39.890,
					longitude: 116.39752,
					title: "点击提示1",
					joinCluster: true,
				}, {
          
   
					id: 2,
					latitude: 39.891,
					longitude: 116.39752,
					title: "点击提示2",
					joinCluster: true,
					customCallout: {
          
   
						anchorY: 0, // Y轴偏移量
						anchorX: 100, // X轴偏移量
						display: "ALWAYS" // 一直展示
					},
				}, {
          
   
					id: 3,
					latitude: 39.892,
					longitude: 116.39752,
					title: "点击提示3",
					joinCluster: true,
					customCallout: {
          
   
						anchorY: 0,
						anchorX: 0,
						display: "ALWAYS"
					},
				}, {
          
   
					id: 4,
					latitude: 39.893,
					longitude: 116.39752,
					title: "点击提示4",
					joinCluster: false,
				}, ],
			}
		},
		onLoad() {
          
   

		},
		onReady() {
          
   
		},
		methods: {
          
   

		}
	}
</script>

<style>
	.base_body {
          
   
		width: 100%;
		height: 100%;
		position: absolute;
	}

	/* 水平，垂直居中 */
	.base_all_center {
          
   
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
          
   
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
          
   
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
          
   
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
          
   
		display: flex;
		flex-direction: row;
	}

	/* 基础dialog */
	.base_dialog {
          
   
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background: rgba(0, 0, 0, 0.5);
	}

	/* *************************************** */
	.customCallout {
          
   
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 30px;
		width: 150px;
		height: 40px;
		display: inline-flex;
		padding: 5px 20px;
		justify-content: center;
		align-items: center;
	}

	.content {
          
   
		flex: 0 1 auto;
		margin: 0 10px;
		font-size: 14px;
	}
</style>

解释： customCallout: { anchorY: 0, // Y轴偏移量 anchorX: 100, // X轴偏移量 display: “ALWAYS” // 一直展示 }, customCallout： 为自定义标注 anchorY：Y轴的偏移量，如果想让标注向上需要 加一个数，反之减一个数 anchorX: 100, // X轴偏移量，如果想让标注向右需要 加一个数，反之减一个数 display: “ALWAYS” 一直展示;BYCLICK 点击之后才会显示（默认）

在需要添加的自定义标注的markers中添加，不添加则不显示。

完结撒花~