先看一下需求,最终也是实现了
没做过地图的在做地图之前一定要花一些时间来看一下文档,这样可以更加快速的开发
当我看到这个需求的时候,首先想到的就是标记点,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
下面是我最终的结果