高德地图SDK嵌入微信小程序之封装导航选项组件

引言

1、该文章用于记录微信小程序的学习历程
2、该文章学习视频为B站博主 [无敌风火轮12] 发布的《微信小程序引入高德地图SDK进行导航》系列视频
3、该文章前置文章为《高德地图SDK嵌入微信小程序之获取当前位置》

一、封装导航选项组件

1、创建组件

在与pages文件夹同级的位置，创建 “components” 组件文件夹，并在其中创建目前所需的 “GaodeHeader” 导航选项组件

2、GaodeHeader组件页面

做一个类似顶部导航栏的可点击的选项卡

<view class="flex-style {{NavigationOrNot ? 'active' : ''}}">
  <view class="flex-item {{gaodeType === 'walk'   && NavigationOrNot ? 'active' : ''}}" bindtouchstart="goToWalk"  >步行</view>
  <view class="flex-item {{gaodeType === 'riding' && NavigationOrNot ? 'active' : ''}}" bindtouchstart="goToRiding">骑行</view>
  <view class="flex-item {{gaodeType === 'car'    && NavigationOrNot ? 'active' : ''}}" bindtouchstart="goToCar"   >驾车</view>
  <view class="flex-item {{gaodeType === 'bus'    && NavigationOrNot ? 'active' : ''}}" bindtouchstart="goToBus"   >公交</view>
</view>

3、GaodeHeader组件样式

.flex-style{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  opacity: 0.3;  /*透明度*/
  pointer-events: none;  /*是否可点击*/
}
.flex-style.active{
  background: #ffffff;
  opacity: 1;
  pointer-events: initial;
}

.flex-item{
  height: 35px;
  line-height: 35px;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.flex-item.active{
  color: #0091ff;
}

3、GaodeHeader组件事件

①由于这是组件页面，所以得用Component作为组件js文件的开头

Component({

②首先存储一个当前组件的默认状态数据

  data: {  //当前组件的默认状态，我默认为步行
    gaodeType: 'walk'
  },

③使用properties接受父组件传过来的参数
    当前选中的导航类型、当前是否在导航

  properties: {  //父组件传过来的新参数
    type: {  //传过来的数据类型，比如“步行”、“骑行”等
      type: String,
      value: ''
    },
    NavigationOrNot: {  //是否在导航（有搜索目的地的操作），默认未搜索
      type: Boolean,
      value: false
    }
  },

④lifetimes用于组件进入节点树前中后期执行的任务
    此时写了在组件布局完成后执行initialize自定义的初始化方法

  lifetimes: {
    attached: function(){  //在组件实例进入节点树时执行

    },
    ready: function(){  //在组件布局完成后执行
      this.initialize()
    },
    detached: function(){  //在组件实例被从页面节点树移除时执行

    }
  },

⑤在methods中写入initialize自定义的初始化方法
    该方法用于将父组件传过来的gaodeType导航类型，赋值给当前组件

  methods: {
    initialize: function(){  //自定义的初始化方法
      console.log('initialize',this.properties)
      this.setData({
        gaodeType: this.properties.type  //将父组件传过来的gaodeType导航类型，赋值给当前组件
      })
    }
  },

⑥紧接着就是页面所写的四种导航点击事件
    首先打印下日志，看下当前是什么导航状态
    然后当前组件导航状态修改为我点击的那个状态

  goToWalk:function(){  //处理步行导航逻辑
    console.log('步行导航')
    this.setType('walk')
  },
  goToRiding:function(){  //处理骑行导航逻辑
    console.log('骑行导航')
    this.setType('riding')
  },
  goToCar:function(){  //处理驾车导航逻辑
    console.log('驾车导航')
    this.setType('car')
  },
  goToBus:function(){  //处理公交导航逻辑
    console.log('公交导航')
    this.setType('bus')
  }

⑦setType中编辑着修改当前导航状态的逻辑
    先改变当前组件的导航类型
    再触发父组件的方法，修改父组件导航状态

  setType: function(type){  //修改当前导航状态
    this.setData({  //首先改变当前组件的导航类型
      gaodeType: type
    }),
    this.triggerEvent('changeType', {  //触发父组件的方法，修改父组件导航状态
      gaode_type: type
    })
  },

---

---

至此，子组件的代码编辑结束

二、地图页面引入导航组件

1、map.json引入组件路径

{
  "usingComponents": {  
    "GaodeHeader":"../../components/GaodeHeader/GaodeHeader" 
  }
}

有的可能会报错注意下引入组件的路径即可

[summer-compiler] Couldn't found the '../components/GaodeHeader/GaodeHeader.json' file 
relative to 'pages/map/map'
Error: [summer-compiler] Couldn't found the '../components/GaodeHeader/GaodeHeader.json' file relative to 'pages/map/map'

2、map.wxml标签引入组件

<!--通过标签方式引入GaodeHeader组件页面-->
<!--
    子页面传递参数给父组件，触发方法changeGaodeType（在map.js文件中）
    父组件传递数据给子组件：
        父组件的数据为gaode_type、daohang在map.js的data中存储
        子组件接收的参数为type、NavigationOrNot，由子组件的Gaodeheader.js中的properties接收
-->
<GaodeHeader bindchangeType="changeGaodeType" type="{{gaode_type}}" NavigationOrNot="{{daohang}}"></GaodeHeader>

3、map.js补充子组件触发的父组件的方法changeGaodeType

  /**
   * 导航选项组件标签，父组件方法
   */
  //切换方式
  changeGaodeType: function(event){
    console.log('切换方式，绘制路线',event.detail);
    this.setData({
      gaode_type: event.detail.gaode_type
    })
    if(!this.data.longitude_e){  //目的地的经度没有的话就return出去
      return
    }
    //绘制路线
  },

---

---

至此导航选项组件的封装及引入完成
呈现效果（此时不可点击，后续实现导航功能时再做操作）