vue-baidu-map：實現地點搜索和路徑規劃

一、自定義一個百度地圖控件：

該控件包括一個輸入框，用於輸入要搜索的地址；一個路線按鈕，點擊後彈出面板，用於選擇出行方式和輸入始終點；一個搜索按鈕。

<bm-control>
        <div id="searchbox" class="clearfix">
          <div id="searchbox-container">

            <div id="sole-searchbox-content" class="searchbox-content" style="display: block;">
              <input id="sole-input" class="searchbox-content-common cc_cursor" type="text" name="word" autocomplete="off" maxlength="256"
                     placeholder="搜地點"
                     v-model="keyword">
              <div class="input-clear cc_pointer" title="清空" style="display: block;"></div>
              <div class="searchbox-content-button right-button loading-button cc_pointer route-button"
                   data-title="路線" data-tooltip="1" @click="showPanel">
                <!--                <i class="el-icon-position" id="luxian"></i>-->
                <!--                <i id="luxian"> </i>-->
                <button id="luxian-button"></button>
                <!--            ::before-->
              </div>
            </div>

            <div id="route-searchbox-content" class="searchbox-content route-searchbox-content bus" style="display: none;">

              <div class="route-header">
                <div class="searchbox-content-common route-tabs cc_cursor">
                  <!--                  <el-checkbox-group-->
                  <!--                          :min="1"-->
                  <!--                          :max="1">-->
                  <div class="tab-item bus-tab cc_pointer" data-index="bus">
                    <el-checkbox v-model="checkedBus">
                      <i></i>
                      <span>公交</span>
                    </el-checkbox>
                  </div>
                  <div class="tab-item drive-tab cc_pointer" data-index="drive">
                    <el-checkbox v-model="checkedDrive">
                      <i></i>
                      <span>駕車</span>
                    </el-checkbox>
                  </div>
                  <div class="tab-item walk-tab cc_pointer" data-index="walk">
                    <el-checkbox v-model="checkedWalk">
                      <i></i>
                      <span>步行</span>
                    </el-checkbox>
                  </div>
                  <div class="tab-item bike-tab cc_pointer" data-index="bike">
                    <el-checkbox v-model="checkedBike">
                      <i></i>
                      <span>騎行</span>
                    </el-checkbox>
                  </div>
                  <!--                  </el-checkbox-group>-->
                  <div class="arrow-wrap"></div>
                </div>
              </div>

              <div class="routebox cc_cursor">

                <div class="searchbox-content-common routebox-content">

                  <div class="routebox-revert cc_pointer" title="切換起終點">
                    <div class="routebox-revert-icon cc_pointer">
                    </div>
                  </div>

                  <div class="routebox-inputs cc_cursor">

                    <div class="routebox-input route-start cc_cursor">
                      <div class="route-input-icon">
                      </div>
                      <input autocomplete="off" maxlength="256" placeholder="輸入起點"
                             class="route-start-input cc_cursor" type="text"
                             v-model="startKeyword">
                      <div class="input-clear" title="清空" style="display: none;">
                      </div>
                      <div class="route-input-add-icon">
                      </div>
                    </div>

                    <div class="routebox-input route-end">
                      <div class="route-input-icon">
                      </div>
                      <input autocomplete="off" maxlength="256" placeholder="輸入終點" class="route-end-input cc_cursor"
                             type="text" v-model="endKeyword">
                      <div class="input-clear" title="清空" style="display: block;">
                      </div>
                    </div>
                  </div>

                </div>

              </div>
            </div>
          </div>


          <button id="search-button" data-title="搜索" data-tooltip="2"></button>

        </div>
 
      </bm-control>

點擊路線按鈕顯示面板：

//顯示面板
      showPanel() {
        // console.log("showPanel")
        var data = document.getElementById('route-searchbox-content').style.cssText
        console.log(data)
        // display: none;
        if(data == "display: block;") {
          document.getElementById('route-searchbox-content').style.cssText = "display: none;"
        }else if(data == "display: none;"){
          document.getElementById('route-searchbox-content').style.cssText = "display: block;"
        }

      }

二、使用vue-baidu-map的組件

使用v-if，選中哪種出行方式，就使用哪個組件。

<!--搜索地點-->
      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="北京"></bm-local-search>

      <!--公交路線規劃-->
      <div v-if="checkedBus">
        <bm-transit :start="startKeyword" :end="endKeyword" :auto-viewport="true" location="北京"></bm-transit>
      </div>

      <!--駕車路線規劃-->
      <div v-if="checkedDrive">
        <bm-driving :start="startKeyword" :end="endKeyword" :auto-viewport="true" location="北京"></bm-driving>
      </div>

      <!--行走路線規劃-->
      <div v-if="checkedWalk">
        <bm-walking :start="startKeyword" :end="endKeyword" :auto-viewport="true" location="北京"></bm-walking>
      </div>

功能可以實現，但是不夠人性化。必要的時候可以使用原生方法實現更多需求。