1. 程式人生 > >微信小程式 map元件 cover-view

微信小程式 map元件 cover-view

<map id="myMap" style="width: 100%; height: 100vh;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}" show-location>
  <cover-view class="cover_body">
    <cover-view class="text_title">cover-view</cover-view>
    <cover-view class="text_content">可覆蓋在原生map元件上的內容</cover-view>
    <cover-view class="text_button">來個按鈕樣子的</cover-view>
  </cover-view>
</map>
.cover_body
{
  position:relative;
  width: 90vw;
  margin-left: 20rpx;
  margin-top: 10rpx;
  border-radius: 5rpx;
  background: white;
  padding: 10rpx;
}
.text_title{
  font-size: 50rpx;
}
.text_content{
  color:darkturquoise
}
.text_button{
  margin-top:10rpx;
  margin-bottom: 10rpx;
  margin-left: 10rpx;
  background-color: orangered;
  color: white;
  padding: 10rpx;
  width: 90vw;
  border-radius: 5rpx;
  text-align: center;
}