The length of the custom bubble (cover-view component) of the map component is inconsistent in the rendering of the real machine, and it is normal on the simulator. On the real machine, all the bubble lengths are the bubble length with the longest text, and the bubble length cannot be adapted according to the text.
<map id="siteMap" show-location scale="{
{15}}" longitude="{
{xxx}}" latitude="{
{xxx}}" markers="{
{markers}}" bindregionchange="regionchange" bindcallouttap="toNavigate">
<cover-view slot="callout">
<block wx:for="{
{sites}}" wx:key="index">
<cover-view marker-id="{
{index}}" class="customCallout">
<cover-view class="left">
<cover-view class="title">{
{item.binname}}</cover-view>
<cover-view class="address">{
{item.binaddress}}</cover-view>
</cover-view>
<cover-view class="right"><cover-view class="iconfont icon-daohang"></cover-view></cover-view>
</cover-view>
</block>
</cover-view>
</map>
reason:
Now the width of the elements inside the cover-view depends on the outermost width, which means that as long as one item width becomes larger in the for loop, the other item widths will also become larger.
solve:
1. Solve the width is not adaptive
The background color should not be added to each item, but to its child elements
2. Icon font is not displayed
change to picture
<cover-view marker-id="{
{index}}">
<cover-view class="customCallout">
<cover-view class="left">
<cover-view class="title">{
{item.binname}}</cover-view>
<cover-view class="address">{
{item.binaddress}}</cover-view>
</cover-view>
<cover-image class="right" src="/static/images/gide.gif" />
</cover-view>
</cover-view>The following content needs to be included in css, and other styles can be adjusted according to your needs
cover-view{
display: inline-block;
}Source of ideas: