收藏
回答

map组件 模态框,真机不显示被地图挡住,编辑器可以

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug map 微信安卓客户端 7.0.17 2.12.0

回答关注问题邀请回答
收藏

2 个回答

  • zard
    zard
    2020-11-05

    我也遇到到了,在部分安卓机上被map遮挡

    2020-11-05
    有用
    回复
  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2020-07-29

    你好,地图组件从基础库v2.7.0 起支持同层渲染可以先检查一下样式。

    2020-07-29
    有用
    回复 11
    • biubiubiu
      biubiubiu
      2020-07-29
      麻烦看一下我抽取出来的案例
      2020-07-29
      回复
    • biubiubiu
      biubiubiu
      2020-07-29
      帮忙看一下,地图遮挡问题很久了,样式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>
      2020-07-29
      回复
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2020-07-29回复biubiubiu
      提供这种格式的代码片段看下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2020-07-29
      回复
    • biubiubiu
      biubiubiu
      2020-07-30回复社区技术运营专员-灵芝
      https://developers.weixin.qq.com/s/5tJ3ydmA7QjW
      2020-07-30
      回复
    • biubiubiu
      biubiubiu
      2020-07-30回复社区技术运营专员-灵芝
      麻烦看一下
      2020-07-30
      回复
    查看更多(6)
登录 后发表内容
问题标签