2 回复
帮忙看一下，地图遮挡问题很久了，样式z-index，无效，真机还是被挡住了。下面这个是一个页面的部分案例，我抽取出来了，搜索框和地址，是需要浮动在map组件之上的
<template>
<view class="content">
<view class="main">
<view class="map\_container">
<map class="map" id="map" style="width: 100%; height: 100%" :longitude="longitude" :latitude="latitude" :markers="markers"
bindmarkertap="makertap" :show-location="isshowlocation">
</map>
<!-- 地址显示 -->
<view class="adress-view">
北京市海淀区西三环路，玉渊潭桥
</view>
</view>
</view>
<!-- 搜索 -->
<view class="search-top">
<view class="image-search">
<!-- <cover-image src="../../static/main/Search.png" alt=""></cover-image> -->
</view>
<input type="text" value="" placeholder="请输入搜索位置" placeholder-style="color:\#9E9E9E;font-size:14px;"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.915,
longitude: 116.404,
markers: \[\], //气泡
isshowlocation: true, //默认显示我的位置
ispolice:false,//默认隐藏
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang=‘scss’ scoped>
.show{
display:block!important;
}
.hide{
display:none!important;
}
.main {
display: flex;
flex: 1;
flex-direction: column;
}
.content {
padding: 0px;
position:relative;
}
.map\_container{
height: 100%;
width: 100%;
position: relative;
.mapB-one{
width:100%;
height:100%;
}
}
/\* 搜索框 \*/
.search-top{
position:fixed;
top:16upx;
left: 32upx;
right: 32upx;
z-index: 9999;
background: \#fff;
height: 80upx;
display: flex;
border-radius: 4upx;
box-shadow:0px 0px 4px 0px rgba(204,204,204,0.5);
.image-search{
text-align: center;
line-height: 95upx;
margin-left: 32upx;
margin-right: 16upx;
cover-image{
width: 40upx;
height: 40upx;
display: inline-block;
}
}
input{
width: 80%;
height: 100%;
}
}
/\* 地址模态框 \*/
.adress-view{
width: 100%;
line-height: 88upx;
background:rgba(0,0,0,0.3);
position: absolute;
bottom: 0;
text-align: center;
font-size:14px;
color: \#FFFFFF;
z-index: 9999;
}
</style>
强力驱动