微信小程序开发(第三天)-地图页面车辆、机构、轨迹等功能

一、需求

1. 提供车辆、机构、轨迹按钮
2. 点击车辆按钮地图页面展示有数据车辆，车辆分为离线和在线两个状态，并且点击地图上车辆展示当前车辆信息。
3. 点击机构按钮地图页面展示机构图标，提供机构信息窗口，窗口内可提供下拉框可搜索机构，并且选择机构后定位机构。
4. 点击轨迹按钮提供轨迹查询窗口，根据时间、车辆查询轨迹。

二、实施

1. 需求1的实施

1. wxml代码

<cover-view class="btnGroup">
            <cover-image class="carImgBtn" src="{{carImg}}" mode="aspectFit"> </cover-image>
            <button class="carBtn" hover-class="button-hover"  bindtap="clickCar"></button>
            <cover-view class="divider"></cover-view>
            <cover-image class="carImgBtn" src="{{hospitalImg}}" mode="aspectFit"> </cover-image>
            <button class="carBtn" hover-class="button-hover"  bindtap="clickHospital"></button>
            <cover-view class="divider"></cover-view>
            <cover-image class="carImgBtn" src="{{trajectoryImg}}" mode="aspectFit"> </cover-image>
            <button class="carBtn" hover-class="button-hover"  bindtap="clickTrajectory"></button>
        </cover-view>

2. wxs代码

.btnGroup{
    width: 30px;
    height: 125px !important;
    margin: 10px;
    position:absolute;
    background-color: #fff;
}
.carBtn{
    margin-top: 5px;
    width: 30px;
    height: 30px;
    position:relative;
    opacity: 0;
    margin-bottom: 5px;
}
.divider {
    background: #979696;
    width: 80%;
    height: 5rpx;
    margin: 0 auto;
  }
.carImgBtn{
    margin-top: 4px;
    width: 30px;
    height: 30px;
    position: absolute;
    margin-bottom: 5px;
}

3. 结果截图
   

2. 需求2

1.点击车辆按钮地图页面展示有数据车辆
js代码

//获取车辆最后定位数据，为了快速显示进入页面调用此接口保存在initMarkers数组中，当点击车辆按钮时保存在markers数组中展示
GetLastGps:function(){
    var that=this;
    wx.request({
      url: 'https://localhost:44341/api/RealTimeData/GetLastGps',// 后端接口调取数据
      data:{
      	//传入参数
        mn:"",
        carNum:"" 
      },
      method:"GET",
      header:{
        'content-type':'application/json'
      },
      success:function(res){
        var data=res.data;
        if(data.success==true){
            data=data.data;
            var result=[];
            var j=0;
            for(var i in data){
                var marker1={
                    id:j++,
                    mn:data[i].mn,
                    carNum:data[i].carNum,
                    latitude: data[i].gCj02_LAT,
                    longitude: data[i].gCj02_LON,
                    postTime:data[i].postTime,
                    width: 24,
                    height: 34,
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display: 'BYCLICK'
                      },
                }
                result.push(marker1);
            }
            that.setData({
                initMarkers:result
            });
        }
        
        //将返回的结果转成json格式,带入到路径
         
      },
      fail:function(res){
        console.log(res)
      }
    })
  },
 clickCar:function(e){
        var that=this;
        if(that.data.carImg=="../../images/car.png"){
            that.setData({
                carImg:"../../images/carclick.png",
                markers:that.data.initMarkers    
            });
        }else{
            that.setData({
                carImg:"../../images/car.png",
                markers:[]
            });
        }
    },

结果截图

2. 点击车辆展示信息
使用了map里的customCallout
JS代码

var marker1={
                    id:j++,
                    mn:data[i].mn,
                    carNum:data[i].carNum,
                    latitude: data[i].gCj02_LAT,
                    longitude: data[i].gCj02_LON,
                    postTime:data[i].postTime,
                    width: 24,
                    height: 34,
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display: 'ALWAYS' 
                      },
                }

WXML代码

<cover-view  slot="callout"  >
        <block wx:for="{{markers}}" wx:key="id">
            <cover-view  class="customCallout"  marker-id="{{item.id}}">
                    <cover-view class="content"> 
                        MN:{{item.mn}} 
                    </cover-view>
                    <cover-view  class="content"> 
                          车辆编号:{{item.carNum}}
                    </cover-view>
                    
                    <cover-view  class="content"> 
                          最后上传时间:{{item.postTime}}
                    </cover-view> 
                     
        </cover-view>
        </block>
            
        </cover-view>  

wxss代码

.customCallout {
    box-sizing: border-box;
    background-color: #fff; 
    border: 1px solid #ccc;
    border-radius: 30px;
    width: 150px;
    height: 50px;
    display: table;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
  }
  .content {
    flex: 0 1 auto;
    margin: 0 10px;
    font-size: 14px;
  }

结果截图

3. bug
可能是微信平台出现的问题，我想要的是点击marker展示信息，customCallout提供的display属性可’BYCLICK’点击显示，但是不知道为什么我使用这个点击不展示，但是真机调试时点击展示，所以我就将这个属性display改为’ALWAYS’来方便测试使用。这个东西熬了我今天一天，我在微信社区查了半天，好像这个问题出现很久了一直没改，不知道为什么。
4. 优化
引入其他组件优化了按钮，如下
微信小程序开发(第四天)-引入vant插件，引入iconfont，地图页面车辆等按钮优化