uniapp 使用map组件 动态自定义标记点图标及内容文字

先看效果

地图中的标记点 可以动态变化自定义的图片与内容

原理

通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置

map组件所在uniapp官网位置： https://uniapp.dcloud.io/component/map

1、想要动态改变标记点图标 必须把默认的标记点覆盖，用到了markers参数下的 iconPath设置标记点的图标，如果需求只需要简单的动态改变标记点的图标到这一步就结束了，但是如果需要动态改变标记点图标及内容(动态显示文字)就需要看下一步！ 2、把iconPath设置的图片改用一张1*1像素的透明背景图 png格式的。

3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在标签内配置 slot="callout"这里注意的是 要比map组件层级高 必须使用 cover-view 或者 cover-image 标签;

<!-- 自定义窗口 -->
<cover-view slot="callout">
	<template v-for="(item,index) in markers">
		<cover-view :marker-id="item.id" :key=index>
			<cover-view class="position-relative" style="width: 92rpx; height: 78rpx;">
				<cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;" :src=item.options.iconPath></cover-image>
				<cover-view style="top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"
					class="border bg-white rounded-circle flex align-center justify-center position-absolute">
					<cover-view>{
          
   {
          
   item.options.labelName}}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</template>

</cover-view>

4、map标签上使用 @callouttap事件 点击标记点对应的气泡时触发,这样就可以动态获取标记点信息了。

<map id="map" ref="map" style="height: 870rpx; width: 750rpx;" :latitude="latitude" :longitude="longitude" :markers="markers" :enable-building=true
:show-location=true :circles=circles @markertap=markertap @callouttap=callouttap></map>

其中、第二步中使用透明背景图把默认标记点隐藏，第三步把自定义气泡弹窗改为标记点，偏移量自行微调到原标记点上方，第四步，获取到点击标记点的回调。这样，就可以实现动态改变标记点图标及内容了。

附上代码(样式缺失,自行修改)