taro 开发微信小程序中map的自定义气泡 customCallout 的坑marker-id无法绑定

先看一下需求,最终也是实现了

在这里插入图片描述

没做过地图的在做地图之前一定要花一些时间来看一下文档,这样可以更加快速的开发

当我看到这个需求的时候,首先想到的就是标记点,markers
于是就用了callout 可是实现不了我的需求在这里插入图片描述

之后用到了自定义 customCallout

使用方法,带注释

在markers中的对象里面加上customCallout属性,
对象中加了customCallout,title和callout就无效了

markersData=[{
      iconPath:markerBg,//图标,需要在上面先import引入,否则展示不出来
      id: 0,//id创建多个需要不同
      latitude: 31.210046,//经纬度
      longitude: 121.315448,
      customCallout:{//自定义气泡
      	display:"ALWAYS",//显示方式,可选值BYCLICK
		anchorX:0,//横向偏移
		anchorY:0,
	  },
	  title:"标题",//标题,点击的时候展示
      callout:{//不适用自定义气泡的东西,在这里面写样式和内容
        content:"99+",
        textAlign:"center",
        color:"#fff",
        borderWidth:0,
        bgColor:'rgba(0,0,0,0.2)',//背景颜色,可使用rgba
        anchorY:30,
        fontSize:16,
        display:"ALWAYS",
      }, 
      width: 40,//icon大小
      height: 50,
    }]

渲染
marker-id就是对应的上面的id

  <cover-view slot="callout">
    <cover-view marker-id="1">
		内容
	</cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>

但是我用taro开发的就是marker-id绑定不上去,下面是问题
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
由于marker-id没有绑定上去所以内容就在顶部了
scroll-top都可绑定上去,但是marker-id就是不行,也是奇了怪了,问了微信官方社区,也是不行,

然后自己就是通过ul给的背景图,结合callout 里面的偏移量,进行实现了
重点:偏移量,和iconPath

下面是我最终的结果
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值