uiniapp 地图map组件自定义气泡customCallout属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了uiniapp 地图map组件自定义气泡customCallout属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<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要和上面自定义气泡中循环名字相同否则不生效
covers: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '/static/img/state2.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 30, //宽
						height: 30, //高
						title: '设备1', //标注点名
						// alpha: 1, //透明度
						joinCluster: true,
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath:'/static/img/state2.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 30, //宽
						height: 30, //高
						title: '设备2', //标注点名
						// alpha: 0.5, //透明度
						joinCluster: true,
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: '/static/img/state1.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 30, //宽
						height: 30, //高
						title: '设备3', //标注点名
						// alpha: 0.5, //透明度
						joinCluster: false,
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: '', //显示的图标
						title: '设备4', //标注点名
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},

					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						title: '设备5', //标注点名
						width: 20, //宽
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX:0,
							display: "ALWAYS"
						},
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						title: '设备6', //标注点名
						width: 20, //宽
						height: 30, //高
						// alpha: 0.5, //透明度
						customCallout: {
							anchorY: 0,
							anchorX: 0,
							display: "ALWAYS"
						},
					},
				],

使用cover-view标里面不能带其他标签否则会报错：

[Component] <view>: <cover-view/> 内只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/> <ad/>，组件的子节点树在真机上都会被忽略。(env: Windows,mp,1.06.2206090; lib: 2.25.0) uniapp customcallout,javascript,小程序