收藏
回答

cover-view显示速度有点慢,而且有时会显示不出来

SDK1.4.2 微信版本6.5.10 系统android  map在真机上运行,点击marker时弹出cover-view,显示速度有点慢,而且有时会显示不出来

上代码:

.wxml

<view class="map_container"> 


  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"  polyline="{{polyline}}" bindtap="maptap">

  <cover-view class="car_info" hidden="{{carInfohidden}}"> 

   <cover-view class="basicInfo">

    <cover-view style=" flex-direction:column;">

      <cover-view class="driverNameCss">{{placeData.driverName}}</cover-view> 

       <cover-view class="carNumberCss">{{placeData.carNumber}}</cover-view>

       <cover-view class="brandNameCss">{{placeData.brandName}}</cover-view> 

       </cover-view>

        

       <cover-image class="carImgCss"  src="../../img/vehicle_detail.png"> </cover-image>

     <cover-image class="closeImageCss"  src="../../img/new_close_gray.png"  bindtap="closeCarInfo"> </cover-image>

    </cover-view>

<cover-view class="stateInfo">

 

    <cover-view class="waringInfo">

       <cover-view class="carState" style="display: flex;"> <cover-view class="carTextFlagCss">当前状态: </cover-view><cover-view class="carTextCss">{{placeData.state}}</cover-view> </cover-view>

       <cover-view class="carStateTime" style="display: flex;"><cover-view  class="carTextFlagCss">上报时间: </cover-view><cover-view class="carTextCss">{{placeData.sTime}}</cover-view> </cover-view>

    </cover-view>

     <cover-image class="lineImage"  src="../../img/vertical_line.png"> </cover-image>

     <cover-image class="lineImage2"  src="../../img/vertical_line.png"> </cover-image>

    <cover-view class="GPSInfo">

      <cover-view class = "subGPSInfo">

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">纬度</cover-view> 

          <cover-view class="carTextCss">{{placeData.latitude}}</cover-view>

        </cover-view>

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">经度</cover-view>

          <cover-view class="carTextCss">{{placeData.longitude}}</cover-view>  

        </cover-view>

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">速度</cover-view>

          <cover-view class="carTextCss">{{placeData.speed}}

          </cover-view>

        </cover-view>

       </cover-view>

   

      <cover-view class = "subGPSInfo">

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">方向</cover-view>

          <cover-view class="carTextCss">{{placeData.heading}}</cover-view> 

        </cover-view>

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">海拔</cover-view>

          <cover-view class="carTextCss">{{placeData.altitude}}</cover-view> 

        </cover-view>

        <cover-view class = "itemCss">

          <cover-view class="carTextFlagCss">GPS时间</cover-view>

          <cover-view class="carTextCss">{{placeData.pTime}}</cover-view> 

        </cover-view>

       </cover-view>

    </cover-view>

  

    </cover-view>


    <cover-view class="otherInfo">

      

         <cover-view class="basicOtherInfo">

           <cover-view style="display: flex;"><cover-view  class="carTextFlagCss">领航员 </cover-view><cover-view class="carTextCss">{{placeData.pilotName}}</cover-view> </cover-view>

            <cover-view style="display: flex;"><cover-view  class="carTextFlagCss">俱乐部 </cover-view><cover-view class="carTextCss">{{placeData.clubName}}</cover-view> </cover-view>

            <cover-view style="display: flex;"><cover-view  class="carTextFlagCss">组别 </cover-view><cover-view class="carTextCss">{{placeData.groupName}}</cover-view> </cover-view>

        </cover-view>

 

   <cover-image  class="historyTraceCss" src="../../img/history_btn.png"  bindtap="showHistoryTrace"> </cover-image>

   

  </cover-view>

  </cover-view>

  </map> 

</view> 


<audio  src="{{src}}" id="myAudio" ></audio>


 .wxss

 

.map_container{ 

    height: 100vh; 

    width: 100%; 

 

.map { 

    height: 100%; 

    width: 100%; 

}






.car_info {


  flex-direction: column;

  align-items: center;

 

}


.basicInfo{

  width: 100%;

  height: 175rpx;

  background-color:#EBF0EB;


  font-size:30rpx;

  font-family:"楷体";

  display: flex;

  flex-direction:row;

}

 .driverNameCss{

  margin-top: 35rpx;

  margin-left: 40rpx;

  color: green;

}

 .carNumberCss{

  margin-left: 40rpx;

}

.brandNameCss{

  margin-left: 40rpx;

}

 .carImgCss{

  margin-top: 70rpx;

  margin-left: 220rpx;

  width: 100rpx;

  height: 100rpx;

}

 .closeImageCss{

  margin-top: 35rpx;

  margin-left: 220rpx;

  width: 50rpx;

  height: 50rpx;  

}



.stateInfo{

  width: 100%;

  height: 300rpx;

  background-color:#5A6A8A;

  font-size:30rpx;

  font-family:"楷体";

  flex-direction:column;

}


.waringInfo{

  margin-top: 30rpx;

  margin-left: 270rpx;

  width: 100%;

  height: 100rpx;

  float: center;

  flex-direction:column;

}

.GPSInfo{

  top: 120rpx;

  margin-left: 40rpx;

  width: 100%;

  height: 200rpx;

  float: center;

  flex-direction:column;

 

}

.subGPSInfo{

  width:100%;

  height: 80rpx;

  display: flex;

 

}



.carTextFlagCss{

  color: #aaaabe;

}


.carTextCss{

  color: #ffffff;

}

 .lineImage{

  top: 102rpx;

  margin-left: 20rpx;

  width: 700rpx;

  height: 3rpx;

  float: left;

}


 .lineImage2{

  top: 195rpx;

  margin-left: 20rpx;

  width: 700rpx;

  height: 3rpx;

  float: left;

}

.itemCss{

  width: 295rpx;

  flex-direction:column;

}



.otherInfo{

  width: 100%;

  height: 280rpx;

  background-color:#475575;

  font-family:"楷体";

  margin-left: 1rpx;

}


.basicOtherInfo{

   margin-top: 20rpx;

  margin-left: 300rpx;

  width: 100%;

  height: 100%;

  float: center;


  flex-direction:row;

   font-size:25rpx;

}


.historyTraceCss{

   margin-top: 10rpx;

  margin-left: 150rpx;

  width: 60%;

  height: 80rpx;

  float: center;

}

    

 


 

       

        


回答关注问题邀请回答
收藏
登录 后发表内容