uni-app中的地图简单说明 map

<map class="map-style" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" :circles='circles' @labeltap="handleMarkerTap"></map>

			return {
				keyword:'',
				latitude: 39.90469, // 地图中心的纬度
				longitude: 116.40717, // 地图中心的经度
				circles: [{ //画圆
					latitude: 39.90469,
					longitude: 116.40717,
					color: '#3699FF23',
					fillColor: "#3699FF23",
					radius: 1000,
					strokeWidth: 1
				}],
				markers: [{
						id: 1,
						latitude: 39.90560,
						longitude: 116.40420,
						name: 'Marker 1',
						width: 30, // 设置标志点的宽度
						height: 30, // 设置标志点的高度
						label: {
							content: '这是一个标志点',
							color: '#FFFFFF',
							bgColor: '#5677BA',
							borderColor: '#FFFFFF',
							padding: 5,
							borderWidth: 1,
							borderRadius: 5,
							anchorX: -50, // 横向中心位置
							anchorY: -50, // 上方位置
						}
					},
					{
						id: 2,
						latitude: 39.90772,
						longitude: 116.40714,
						name: 'Marker 2',
						width: 30, // 设置标志点的宽度
						height: 30 // 设置标志点的高度
					}
				],
				value: 30,
				scale: 15
			}
	


//样式随手写的
.map-style {
	width: 100%;
	height: 100vh;
}

latitude        属性为        地图中心的纬度

longitude        属性为        地图中心的经度

markers        属性为        地图位置标记点

scale        属性为        地图缩放大小

circles        属性为        地图的蓝色圈

@labeltap        属性为        地图标记点介绍文字触发事件

这里只是简单说明,想要了解更多留言我更新一下新的文章

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值