<map style="width: 100%; height: 892rpx;" class="map" :customCallout="callout" :scale="scale"
					:latitude="latitude" :longitude="longitude" :markers="covers">
					<cover-view slot="callout">
						<block v-for="(item,index) in covers" :key="index">
							<cover-view class="customCallout" :marker-id="item.id">
								<cover-view class="content">
									{{item.title}}
									<cover-view class="equipment-status" :class="item.joinCluster?'red':''">在線</cover-view>
								</cover-view>
							</cover-view>
						</block>
					</cover-view>
</map>

//covers要和上面自定義氣泡中循環(huán)名字相同否則不生效
covers: [{
						id: 0,
						latitude: 23.13065, //緯度
						longitude: 113.3274, //經(jīng)度
						iconPath: '/static/img/state2.png', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						width: 30, //寬
						height: 30, //高
						title: '設(shè)備1', //標(biāo)注點(diǎn)名
						// alpha: 1, //透明度
						joinCluster: true,
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //緯度
						longitude: 113.324587, //經(jīng)度
						iconPath:'/static/img/state2.png', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						width: 30, //寬
						height: 30, //高
						title: '設(shè)備2', //標(biāo)注點(diǎn)名
						// alpha: 0.5, //透明度
						joinCluster: true,
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 2,
						latitude: 23.1338, //緯度
						longitude: 113.33052, //經(jīng)度
						iconPath: '/static/img/state1.png', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						width: 30, //寬
						height: 30, //高
						title: '設(shè)備3', //標(biāo)注點(diǎn)名
						// alpha: 0.5, //透明度
						joinCluster: false,
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},
					},
					{
						id: 3,
						latitude: 23.136455, //緯度
						longitude: 113.329002, //經(jīng)度
						iconPath: '', //顯示的圖標(biāo)
						title: '設(shè)備4', //標(biāo)注點(diǎn)名
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						width: 20, //寬
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},

					},
					{
						id: 4,
						latitude: 23.224781, //緯度
						longitude: 113.293911, //經(jīng)度
						iconPath: '', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						title: '設(shè)備5', //標(biāo)注點(diǎn)名
						width: 20, //寬
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 5,
						latitude: 23.072726, //緯度
						longitude: 113.277921, //經(jīng)度
						iconPath: '', //顯示的圖標(biāo)        
						rotate: 0, // 旋轉(zhuǎn)度數(shù)
						title: '設(shè)備6', //標(biāo)注點(diǎn)名
						width: 20, //寬
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},
					},
				],

使用cover-view標(biāo)里面不能帶其他標(biāo)簽否則會(huì)報(bào)錯(cuò)：

[Component] <view>: <cover-view/> 內(nèi)只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/> <ad/>，組件的子節(jié)點(diǎn)樹在真機(jī)上都會(huì)被忽略。(env: Windows,mp,1.06.2206090; lib: 2.25.0)

?文章來源地址http://www.zghlxwxcb.cn/news/detail-529612.html

到了這里，關(guān)于uiniapp 地圖map組件自定義氣泡customCallout屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！