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

先看效果

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

原理

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

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

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

3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在

<!-- 自定义窗口 -->
<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>

 
  
  

 
  
  

   
   
1
   
   
2
  
  

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

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

<template>
	<view>
<!-- 		<nav-bar bgColor="#4f8fef" fontColor="#fff" title="地图" :titleCenter='true'></nav-bar>
		<free-scroll-main :scrollView='false' :showTabber="false" scrollViewStyle="background-color: #fafaf9;">
	<span class="token operator">&lt;</span><span class="token operator">/</span>free<span class="token operator">-</span>scroll<span class="token operator">-</span>main<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"bg-dark"</span> style<span class="token operator">=</span><span class="token string">"height: 870rpx; width: 750rpx;"</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>map id<span class="token operator">=</span><span class="token string">"map"</span> ref<span class="token operator">=</span><span class="token string">"map"</span> style<span class="token operator">=</span><span class="token string">"height: 870rpx; width: 750rpx;"</span> <span class="token operator">:</span>latitude<span class="token operator">=</span><span class="token string">"latitude"</span> <span class="token operator">:</span>longitude<span class="token operator">=</span><span class="token string">"longitude"</span> <span class="token operator">:</span>markers<span class="token operator">=</span><span class="token string">"markers"</span> <span class="token operator">:</span>enable<span class="token operator">-</span>building<span class="token operator">=</span><span class="token string">'true'</span>
				<span class="token operator">:</span>show<span class="token operator">-</span>location<span class="token operator">=</span><span class="token string">'true'</span> <span class="token operator">:</span>circles<span class="token operator">=</span><span class="token string">'circles'</span> @markertap<span class="token operator">=</span><span class="token string">'markertap'</span> @callouttap<span class="token operator">=</span><span class="token string">'callouttap'</span><span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 自定义窗口 <span class="token operator">--</span><span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span>cover<span class="token operator">-</span>view slot<span class="token operator">=</span><span class="token string">"callout"</span><span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(item,index) in markers"</span><span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>cover<span class="token operator">-</span>view <span class="token operator">:</span>marker<span class="token operator">-</span>id<span class="token operator">=</span><span class="token string">"item.id"</span> <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">'index'</span><span class="token operator">&gt;</span>
							<span class="token operator">&lt;</span>cover<span class="token operator">-</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"position-relative"</span> style<span class="token operator">=</span><span class="token string">"width: 92rpx; height: 78rpx;"</span><span class="token operator">&gt;</span>
								<span class="token operator">&lt;</span>cover<span class="token operator">-</span>image <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"position-absolute"</span> style<span class="token operator">=</span><span class="token string">"width: 92rpx; height: 78rpx;"</span> <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">'item.options.iconPath'</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>image<span class="token operator">&gt;</span>
								<span class="token operator">&lt;</span>cover<span class="token operator">-</span>view style<span class="token operator">=</span><span class="token string">"top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"</span>
									<span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"border bg-white rounded-circle flex align-center justify-center position-absolute"</span><span class="token operator">&gt;</span>
									<span class="token operator">&lt;</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>item<span class="token punctuation">.</span>options<span class="token punctuation">.</span>labelName<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span>
								<span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span>
							<span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

				<span class="token operator">&lt;</span><span class="token operator">/</span>cover<span class="token operator">-</span>view<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">/</span>map<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

		<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"mt-5 flex align-center justify-center"</span><span class="token operator">&gt;</span>

			<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"position-relative border bg-white rounded-10"</span> style<span class="token operator">=</span><span class="token string">" width: 650rpx; height: 220rpx;"</span><span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span>view <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">"getBgColor"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"position-absolute rounded-circle flex align-center justify-center"</span>
					style<span class="token operator">=</span><span class="token string">"width: 60rpx; height: 60rpx; top: -30rpx; left: 30rpx;"</span><span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"text-white"</span> style<span class="token operator">=</span><span class="token string">"font-size: 24rpx;"</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>targetInfo<span class="token punctuation">.</span>labelName<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">" pt-3 px-3 flex align-center justify-between"</span><span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"flex flex-column"</span><span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-md font-weight-bolder"</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>targetInfo<span class="token punctuation">.</span>locationName<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-sm pt-1"</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>targetInfo<span class="token punctuation">.</span>address<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-sm py-1"</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>targetInfo<span class="token punctuation">.</span>city<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"font-sm"</span><span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>targetInfo<span class="token punctuation">.</span>phoneNumber<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"flex flex-column"</span><span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>u<span class="token operator">-</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn mb-4"</span> type<span class="token operator">=</span><span class="token string">"primary"</span><span class="token operator">&gt;</span>预约<span class="token operator">&lt;</span><span class="token operator">/</span>u<span class="token operator">-</span>button<span class="token operator">&gt;</span>
						<span class="token operator">&lt;</span>u<span class="token operator">-</span>button @click<span class="token operator">=</span><span class="token string">"openMap"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn"</span> type<span class="token operator">=</span><span class="token string">"primary"</span><span class="token operator">&gt;</span>导航<span class="token operator">&lt;</span><span class="token operator">/</span>u<span class="token operator">-</span>button<span class="token operator">&gt;</span>
					<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
				<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

</template>

<script>
import Map from ‘@/common/js/openMap.js’

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span>
	components<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
		<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
			<span class="token comment">// 圆球颜色</span>
			color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#0797e4'</span><span class="token punctuation">,</span> <span class="token string">'#2be4ae'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
			<span class="token comment">// 定位维度</span>
			latitude<span class="token operator">:</span> <span class="token number">22.26666</span><span class="token punctuation">,</span>
			<span class="token comment">// 定位经度</span>
			longitude<span class="token operator">:</span> <span class="token number">113.54342</span><span class="token punctuation">,</span>
			<span class="token comment">// 点击选中id</span>
			checkedId<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
			<span class="token comment">// 选中marker列表下标</span>
			markerIndex<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
			<span class="token comment">// 点击获取到的标点信息</span>
			targetInfo<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				labelName<span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
				locationName<span class="token operator">:</span> <span class="token string">'嘉苑'</span><span class="token punctuation">,</span>
				address<span class="token operator">:</span> <span class="token string">'情侣路公交亭'</span><span class="token punctuation">,</span>
				city<span class="token operator">:</span> <span class="token string">'珠海'</span><span class="token punctuation">,</span>
				phoneNumber<span class="token operator">:</span> <span class="token string">'(0123)119119119'</span><span class="token punctuation">,</span>
				latitude<span class="token operator">:</span> <span class="token number">22.26666</span><span class="token punctuation">,</span>
				longitude<span class="token operator">:</span> <span class="token number">113.54342</span><span class="token punctuation">,</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>

			<span class="token comment">// 标点列表</span>
			markers<span class="token operator">:</span> <span class="token punctuation">[</span>
				<span class="token comment">// 	{<!-- --></span>
				<span class="token comment">// 	id: 1, //标记点id</span>
				<span class="token comment">// 	clusterId: 1, //自定义点聚合簇效果时使用</span>
				<span class="token comment">// 	title: '选中',</span>
				<span class="token comment">// 	latitude: 22.26666, //维度</span>
				<span class="token comment">// 	longitude: 113.54342, //经度</span>
				<span class="token comment">// 	alpha: 1, //透明度 0-1</span>
				<span class="token comment">// 	iconPath: '/static/images/map/none.png',</span>
				<span class="token comment">// 	options: {<!-- --></span>
				<span class="token comment">// 		checked: true,</span>
				<span class="token comment">// 		iconPath: '/static/images/map/select.png',</span>
				<span class="token comment">// 		labelName: 'A',</span>
				<span class="token comment">// 		locationName: '嘉苑',</span>
				<span class="token comment">// 		address: '高新区大学路101号',</span>
				<span class="token comment">// 		city: '珠海',</span>
				<span class="token comment">// 		phoneNumber: '(0123)119119119'</span>
				<span class="token comment">// 	},</span>
				<span class="token comment">// 	// 自定义窗口</span>
				<span class="token comment">// 	customCallout: {<!-- --></span>
				<span class="token comment">// 		anchorX: -1,</span>
				<span class="token comment">// 		anchorY: 46,</span>
				<span class="token comment">// 		display: "ALWAYS"</span>
				<span class="token comment">// 	},</span>

				<span class="token comment">// },</span>
			<span class="token punctuation">]</span><span class="token punctuation">,</span>


			<span class="token comment">// 是否显示圆</span>
			circles<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span>
				latitude<span class="token operator">:</span> <span class="token number">22.26666</span><span class="token punctuation">,</span>
				longitude<span class="token operator">:</span> <span class="token number">113.54342</span><span class="token punctuation">,</span>
				color<span class="token operator">:</span> <span class="token string">'#2979ffcc'</span><span class="token punctuation">,</span>
				fillColor<span class="token operator">:</span> <span class="token string">'#2979ff61'</span><span class="token punctuation">,</span>
				strokeWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
				radius<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
			<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

			<span class="token comment">// 控件</span>
			controls<span class="token operator">:</span> <span class="token punctuation">[</span>

			<span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	watch<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
		<span class="token comment">// 监听选中下标 改变图片 </span>
		<span class="token function">markerIndex</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>val<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>iconPath <span class="token operator">=</span> <span class="token string">'/static/images/map/none.png'</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>val<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>iconPath <span class="token operator">=</span> <span class="token string">'/static/images/map/select.png'</span><span class="token punctuation">;</span>
			<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>oldVal<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>oldVal<span class="token punctuation">]</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>iconPath <span class="token operator">=</span> <span class="token string">'/static/images/map/noselect.png'</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> oldVal<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	computed<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
		<span class="token function">getBgColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background-image: linear-gradient(90deg, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">);</span><span class="token template-punctuation string">`</span></span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
		<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">isGetLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>

		<span class="token comment">// 测试</span>
		<span class="token function">ceshi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

			<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">5</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
					id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//标记点id</span>
					clusterId<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//自定义点聚合簇效果时使用</span>
					title<span class="token operator">:</span> <span class="token string">'选中'</span><span class="token punctuation">,</span>
					latitude<span class="token operator">:</span> <span class="token number">22.26666</span><span class="token punctuation">,</span> <span class="token comment">//维度</span>
					longitude<span class="token operator">:</span> <span class="token number">113.54342</span><span class="token punctuation">,</span> <span class="token comment">//经度</span>
					alpha<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//透明度 0-1</span>
					iconPath<span class="token operator">:</span> <span class="token string">'/static/images/map/none.png'</span><span class="token punctuation">,</span>
					options<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
						iconPath<span class="token operator">:</span> <span class="token string">'/static/images/map/noselect.png'</span><span class="token punctuation">,</span>
						labelName<span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
						locationName<span class="token operator">:</span> <span class="token string">'嘉苑'</span><span class="token punctuation">,</span>
						address<span class="token operator">:</span> <span class="token string">'高新区大学路101号'</span><span class="token punctuation">,</span>
						city<span class="token operator">:</span> <span class="token string">'珠海'</span><span class="token punctuation">,</span>
						phoneNumber<span class="token operator">:</span> <span class="token string">'(0123)119119119'</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 自定义窗口</span>
					customCallout<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
						anchorX<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
						anchorY<span class="token operator">:</span> <span class="token number">46</span><span class="token punctuation">,</span>
						display<span class="token operator">:</span> <span class="token string">"ALWAYS"</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>

				<span class="token punctuation">}</span>
				<span class="token keyword">let</span> start <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
				obj<span class="token punctuation">.</span>id <span class="token operator">=</span> start<span class="token punctuation">;</span>
				obj<span class="token punctuation">.</span>clusterId <span class="token operator">=</span> start<span class="token punctuation">;</span>
				obj<span class="token punctuation">.</span>options<span class="token punctuation">.</span>labelName <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">65</span> <span class="token operator">+</span> start<span class="token punctuation">)</span> <span class="token comment">// A</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>

			<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
					<span class="token keyword">let</span> suiji <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.0003</span><span class="token punctuation">;</span>
					<span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
						suiji <span class="token operator">=</span> <span class="token operator">-</span>suiji<span class="token punctuation">;</span>
					<span class="token punctuation">}</span>

					<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>longitude <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>longitude <span class="token operator">+</span> suiji<span class="token punctuation">;</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>latitude <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>latitude <span class="token operator">+</span> suiji<span class="token punctuation">;</span>
					<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>longitude <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>longitude <span class="token operator">+</span> suiji<span class="token punctuation">;</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>latitude <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>latitude <span class="token operator">-</span> suiji<span class="token punctuation">;</span>
					<span class="token punctuation">}</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>suiji<span class="token punctuation">)</span><span class="token punctuation">;</span>
					<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
					timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">50</span> <span class="token operator">*</span> index<span class="token punctuation">)</span>

			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTargetInfo</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1500</span><span class="token punctuation">)</span>

		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">getTargetInfo</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>labelName <span class="token operator">=</span> obj<span class="token punctuation">.</span>options<span class="token punctuation">.</span>labelName<span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>locationName <span class="token operator">=</span> obj<span class="token punctuation">.</span>options<span class="token punctuation">.</span>locationName<span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>address <span class="token operator">=</span> obj<span class="token punctuation">.</span>options<span class="token punctuation">.</span>address<span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>phoneNumber <span class="token operator">=</span> obj<span class="token punctuation">.</span>options<span class="token punctuation">.</span>phoneNumber<span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>longitude <span class="token operator">=</span> obj<span class="token punctuation">.</span>longitude<span class="token punctuation">;</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>latitude <span class="token operator">=</span> obj<span class="token punctuation">.</span>latitude<span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 点击标记点</span>
		<span class="token function">markertap</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> <span class="token string">'标记点e'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 点击自定义气泡</span>
		<span class="token function">callouttap</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>checkedId <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>markerId<span class="token punctuation">;</span>
			<span class="token keyword">let</span> markerId <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>markerId<span class="token punctuation">;</span>
			<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id <span class="token operator">==</span> markerId<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>markerIndex <span class="token operator">=</span> i<span class="token punctuation">;</span>
					<span class="token keyword">break</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
			<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>markerIndex <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
				<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTargetInfo</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>markers<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>markerIndex<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

			<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
				uni<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
					title<span class="token operator">:</span> <span class="token string">'暂未该设备信息'</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span>

		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 打开地图导航</span>
		<span class="token function">openMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'uni.getSystemInfoSync().platform'</span><span class="token punctuation">,</span> uni<span class="token punctuation">.</span><span class="token function">getSystemInfoSync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>platform<span class="token punctuation">)</span><span class="token punctuation">;</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>longitude<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token comment">// Map.openMap(this.targetInfo.latitude, this.targetInfo.longitude, this.targetInfo.locationName, 'wgs84')</span>
			<span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				origin<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//导航起点坐标和名称,如果不传则起点为当前位置</span>
					latitude<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>latitude<span class="token punctuation">,</span>
					longitude<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>longitude<span class="token punctuation">,</span>
					name<span class="token operator">:</span> <span class="token string">"起点"</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>

				destination<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//导航终点点坐标和名称</span>
					latitude<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span>
					longitude<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>longitude<span class="token punctuation">,</span>
					name<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>targetInfo<span class="token punctuation">.</span>locationName
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token comment">// #ifdef MP-WEIXIN</span>
				mapId<span class="token operator">:</span> <span class="token string">"map"</span><span class="token punctuation">,</span>
				<span class="token comment">// #endif</span>
				mode<span class="token operator">:</span> <span class="token string">"drive"</span> <span class="token comment">//导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike;</span>
			<span class="token punctuation">}</span>
			<span class="token comment">//路线规划</span>
			Map<span class="token punctuation">.</span><span class="token function">routePlan</span><span class="token punctuation">(</span>options<span class="token punctuation">,</span> <span class="token string">"gcj02"</span><span class="token punctuation">)</span>
			<span class="token comment">//驾车导航，打开地图直接开启导航，只需要传入options.destination终点信息</span>
			Map<span class="token punctuation">.</span><span class="token function">navigation</span><span class="token punctuation">(</span>options<span class="token punctuation">,</span> <span class="token string">"gcj02"</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 获取定位信息</span>
		<span class="token function">getLocationInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			uni<span class="token punctuation">.</span><span class="token function">getLocation</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				type<span class="token operator">:</span> <span class="token string">'gcj02'</span><span class="token punctuation">,</span> <span class="token comment">//gcj02国测局坐标</span>
				<span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'当前位置的经度：'</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>longitude<span class="token punctuation">)</span><span class="token punctuation">;</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'当前位置的纬度：'</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>latitude<span class="token punctuation">)</span><span class="token punctuation">;</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>longitude <span class="token operator">=</span> res<span class="token punctuation">.</span>longitude<span class="token punctuation">;</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>latitude <span class="token operator">=</span> res<span class="token punctuation">.</span>latitude<span class="token punctuation">;</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>circles<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude <span class="token operator">=</span> res<span class="token punctuation">.</span>longitude<span class="token punctuation">;</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>circles<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude <span class="token operator">=</span> res<span class="token punctuation">.</span>latitude<span class="token punctuation">;</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">ceshi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 获取定位授权</span>
		<span class="token function">getAuthorizeInfo</span><span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token string">"scope.userLocation"</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗</span>
			<span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
			uni<span class="token punctuation">.</span><span class="token function">authorize</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				scope<span class="token operator">:</span> a<span class="token punctuation">,</span>
				<span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.1 允许授权</span>
					_this<span class="token punctuation">.</span><span class="token function">getLocationInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.2 拒绝授权</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"你拒绝了授权，无法获得周边信息"</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">// 查看是否已经授权定位</span>
		<span class="token function">isGetLocation</span><span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token string">"scope.userLocation"</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">// 3. 检查当前是否已经授权访问scope属性，</span>
			<span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
			<span class="token comment">// #ifdef MP</span>
			uni<span class="token punctuation">.</span><span class="token function">getSetting</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				<span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
					<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>res<span class="token punctuation">.</span>authSetting<span class="token punctuation">[</span>a<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置</span>
						_this<span class="token punctuation">.</span><span class="token function">getAuthorizeInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
					<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
						_this<span class="token punctuation">.</span><span class="token function">getLocationInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token comment">// #endif</span>

		<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</script>
<style scoped lang=“scss”>
.btn {
&/deep/.u-btn {
width: 148rpx;
height: 56rpx;
}
}
</style>

<style>
@import ‘@/common/free.css’;
@import ‘@/common/common.css’;
</style>

先看效果

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

原理

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

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

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

3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在

<!-- 自定义窗口 -->
<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>