uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)

在这里插入图片描述

		<view class="box">
			<map
				style="width: 100%; height: 300px;"
				:latitude="latitude"
				:longitude="longitude"
				:markers="covers"
				:circles="circles"
			></map>
		</view>
export default {
	data() {
		return {
		    // 中心经纬度
			latitude: 39.909,
			longitude: 116.39742,
			// 显示圆配置
			circles: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					color: '#54C3FF',
					// 填充颜色
					fillColor: '#A3FF746A',
					// 圆半径
					radius: 150,
					// 边
					strokeWidth: 1
				}
			],
			// 打点
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath:
						'../../static/images/grab-a-single.png'
				},
				{
					latitude: 39.9,
					longitude: 116.39,
					iconPath:
						'../../static/images/grab-a-single.png'
				}
			]
		};
	}
};

地图上显示圆

circles

在地图上显示圆

属性	    说明	类型	必填	备注
latitude	纬度	Number	是	浮点数,范围 -90 ~ 90
longitude	经度	Number	是	浮点数,范围 -180 ~ 180
color	 描边的颜色	String	否	8位十六进制表示,**后两位表示alpha值**,如:#000000AA;#00000为十六进制
fillColor 填充颜色	String	否	8位十六进制表示,**后两位表示alpha值**,如:#000000AA;#00000为十六进制
radius	   半径	    Number	是	
strokeWidth	描边的宽度	Number	否	
level	压盖关系,默认为 abovelabels	String	false	微信小程序

圆的颜色设置

一般来说我们都是想设置成透明的圆,十六进制的后两位表示颜色
eg:#0000006A
6A就是表示透明度,数字越大透明度越高

评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值