原来写法
html
<view class="map_bg" id="weixinMap" bindtap="event" style="display: none;">
<map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;" latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
</map>
<view class="map_company flex_start">
<image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
<view class="company">
<view class="companyname omit">{{base_info.companyname}}</view>
<view class="district omit">{{base_info.district_text}}</view>
</view>
<view class="arrow_right"></view>
</view>
</view>
<view class="address address_distance">
<image class="map_site" src="../../public/images/jobshow/address.png"></image>
{{distance||'计算中'}}
</view>
css
.company_item .map_company{
padding: 10rpx;
width: 550rpx;
height: 80rpx;
border-radius: 8rpx;
background: #fff;
position:absolute;
top:-50%;
left:-50%;
transform:translate(-50%,-50%);
color: #000;
}
解决:在map外面包一层以及整体在外面包一层+定位修改为static+z-index
html
<view>
<view class="map_bg" id="weixinMap" bindtap="event">
<map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;" latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
</map>
</view>
<view class="map_company flex_start">
<image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
<view class="company">
<view class="companyname omit">{{base_info.companyname}}</view>
<view class="district omit">{{base_info.district_text}}</view>
</view>
<view class="arrow_right"></view>
</view>
</view>
<view class="address address_distance">
<image class="map_site" src="../../public/images/jobshow/address.png"></image>
{{distance||'计算中'}}
</view>
css
.company_item .map_company {
padding: 10rpx;
width: 550rpx;
height: 80rpx;
border-radius: 8rpx;
background: #fff;
position:static;
margin: -23% auto 0;
z-index: 1000;
color: #000;
}