案例效果圖:
map地圖氣泡有兩種方式:
?
?一種是在marker上的,這種不能夠自定義樣式,如果需要展示花里胡哨的,采用第一種方式,進(jìn)行cover-view布局
?一、首先customCallout 是作為一個屬性存在的,需要在marker中存在,我開發(fā)實(shí)例:
var markers = [{
iconPath: iconImg,
id: resp.data.data[0].id,
latitude: ss[1],
longitude: ss[0],
width: 30,
height: 30,
customCallout: {
anchorY: 0, // Y軸偏移量
anchorX: 0, // X軸偏移量
display: 'ALWAYS', // 'BYCLICK':點(diǎn)擊顯示; 'ALWAYS':常顯
},
}]
二、在map上添加對應(yīng)組件
<!--地圖控件-->
<map id="map" class="map_css" scale="{{scale}}" enable-satellite="{{weixing}}" enable-traffic="{{lukong}}" latitude="{{location.latitude}}" longitude="{{location.longitude}}" show-location="{{showlocation}}" markers="{{markers}}" bindmarkertap="getMarker">
<!-- 自定義氣泡 -->
<cover-view slot="callout">
<!-- <cover-view class="callout"> -->
<cover-view class="customCallout" marker-id="{{customCalloutid}}">
----自定義布局---
</cover-view>
</cover-view>
</cover-view>
在這里需要強(qiáng)調(diào),marker-id需要跟marker一直文章來源:http://www.zghlxwxcb.cn/news/detail-666829.html
不然不展示,并且id是number類型文章來源地址http://www.zghlxwxcb.cn/news/detail-666829.html
到了這里,關(guān)于微信小程序map自定義氣泡customCallout的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!