一、自定义一个百度地图控件:
该控件包括一个输入框,用于输入要搜索的地址;一个路线按钮,点击后弹出面板,用于选择出行方式和输入始终点;一个搜索按钮。
<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>
功能可以实现,但是不够人性化。必要的时候可以使用原生方法实现更多需求。