微信小程序，如何在地图map上面显示自己写的样式呢？

最新推荐文章于 2025-11-11 16:30:21 发布

原创最新推荐文章于 2025-11-11 16:30:21 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#weixin

weixin 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在小程序中利用cover-view标签优化地图组件的显示效果，通过覆盖原生地图组件，实现更丰富的UI交互，如添加搜索框、提示信息等。

必须使用"<cover-view>""</cover-view>"标签，覆盖原生组件。如下所示：
<map class='map_container' id="map" scale="{{scale}}" longitude='{{longitude}}' latitude='{{latitude}}' controls="{{controls}}" markers="{{markers}}" polyline="{{}}" show-location bindcontroltap="controltap" bindcallouttap='' bindmarkertap="markertap" bindregionchange="regionchange" style="width: 100%; height: 350px;margin-top:0px">
  <cover-view  wx:if='{{showCover}}' class="wxSearch">
  <cover-view class="wxSearchInner">
      <!-- 搜索提示部分 -->
      <cover-view wx:for="{{wxSearchData}}">
        <cover-view class="wxSearchMindKeyItem" bindtap="wxSearchKeyTap" 
        data-id='{{item.id}}' data-key="{{item}}">
        {{item.XXXX}}
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</map>