先来看实现效果图(uniapp实现,代码在下面)
在图片中我们看到标记点有以下需求:
1、标记点是自定义的,并不是微信默认
2、标记点的自定义icon有四种形式
3、数字是动态的
4、数字颜色有两种形式
1、自定义标记点
2、自定义标记点icon(marker属性下使用)
3、动态数字(marker属性下使用)
数字动态展示使用
marker
的callout
和label
都可以,但是在苹果手机不显示label
,在安卓手机上callout
定位无效,所以在使用的时候用wx.getSystemInfo
获取一下手机型号,来分别展示callout
还是label
4、数字颜色不同
5、代码实现
<map
class="map"
:longitude="currLoca.longitude"
:latitude="currLoca.latitude"
:show-location="true"
:markers="markers"
@markertap="fetchShopDetail"
@labeltap="fetchShopDetail"
@callouttap="fetchShopDetail"
:scale="11"
id="map"
ref="