最近博主做完的一个项目用到了百度地图，有了一些体会和心得，由于是公司的项目，这里只附部分代码来探讨问题。
（本次使用vue + vant ui + Bmap）
需求：输入框可以自动检索地点关键字，当起点和终点都有内容时，自动计算出两地里程和所需时间。
1.安装Bmap
1
| npm install vue-baidu-map --save
|
2.全局引入
1
2
3
4
5
| import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map';
Vue.use(BaiduMap, {
ak: 'you key'
})
|
3.组件注册
1
2
3
4
5
6
7
8
9
10
11
12
| export default {
data(){
components: {
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker
}
}
}
|
4.HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<baidu-map v-bind:style="mapStyle" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"
@ready="handler" @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom" style="position: relative;">
<bm-view style="width: 100%; height:450px;"></bm-view>
<bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-driving
v-if="pathShow"
:start="valueStartLine"
:end="valueEndLine"
:auto-viewport="false"
:panel = 'false'
policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
>
</bm-driving>
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keywordStart" :sugStyle="{zIndex: 999999}">
<input type="text" :value="keywordStart" @focus="focusStrat" @blur="blurStrat" @input="inputStartHandel" placeholder="请输入出发点" class="serachinput serachinput1 b-b-dark fw-400">
</bm-auto-complete>
<bm-auto-complete v-model="keywordEnd" :sugStyle="{zIndex: 999999}">
<input type="text" :value="keywordEnd" @focus="focusEnd" @blur="blurEnd" @input="inputEndHandel" placeholder="请输入目的地" class="serachinput serachinput2 fw-400">
</bm-auto-complete>
</bm-control>
<bm-local-search :keyword="keywordStart" :auto-viewport="true" @searchcomplete="searchStart" style="width:0px;height:0px;overflow:hidden;"></bm-local-search>
<bm-local-search :keyword="keywordEnd" :auto-viewport="true" @searchcomplete="searchEnd" style="width:0px;height:0px;overflow:hidden;"></bm-local-search>
<div style="position: absolute;bottom: 45px;width: 22%;line-height: 44px" class="bg-w pl-5 b-b-dark fw-400">
<van-icon name="location-o" color="#eaa62b"/>
<span style="font-size: 1rem;padding-left: 3px;">出发点</span>
</div>
<div style="position: absolute;bottom: 0px;width: 22%;line-height: 46px" class="bg-w pl-5 fw-400">
<van-icon name="location-o" color="#66a9f6"/>
<span style="font-size: 1rem;padding-left: 3px;">目的地</span>
</div>
<div v-show="HisAddressStartShow" style="z-index: 1000; width: 100%;position: absolute;top: 90%;box-shadow: 0 5px 10px #dbdbdb" class="bg-w pt-10 fw-400">
<div class="font-color-light pl-25">
<span>历史出行-出发点</span>
<span @click="HisAddressStartShow = false" class="float-r pr-25">关闭</span>
</div>
<div v-for="item of historyStartList" @click="getHistoryAddressStart(item)" class="pb-5 pl-25">{{item.origination}}</div>
</div>
<div v-show="HisAddressEndShow" style="z-index: 1000; width: 100%;position: absolute;top: 100%;box-shadow: 0 5px 10px #dbdbdb" class="bg-w pt-10 fw-400">
<div class="font-color-light pl-25">
<span>历史出行-目的地</span>
<span @click="HisAddressEndShow = false" class="float-r pr-25">关闭</span>
</div>
<div v-for="item of historyEndList" @click="getHistoryAddressEnd(item)" class="pb-5 pl-25">{{item.destination}}</div>
</div>
</baidu-map>
|
5.方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| /*地图-起点搜索*/
searchStart(e){
if (e){
console.log(e);
if (this.flag == '1'){ //flag为1：出发点；flag为2，终点
this.startLng = e.Hr[0].point.lng;
this.startLat = e.Hr[0].point.lat;
this.keywordStartSearch = e.keyword;
this.keywordStartSearch? this.HisAddressStartShow = false:this.HisAddressStartShow = true;
}
console.log('起点经度：'+this.startLng+'；起点纬度：'+this.startLat+'；起点关键字：'+this.keywordStartSearch);
if(this.keywordStartSearch.length!=0&&this.keywordEndSearch.length!==0){
// 路线距离计算方法
this.pointDeal();
}
}
},
/*地图-终点搜索*/
searchEnd(e){
if (e){
if (this.flag == '2'){ //flag为1：出发点；flag为2，终点
this.endLng = e.Hr[0].point.lng;
this.endLat = e.Hr[0].point.lat;
this.keywordEndSearch=e.keyword;
}
if(this.keywordStartSearch.length!=0&&this.keywordEndSearch.length!==0){
// 路线距离计算方法
this.pointDeal();
}
}
},
// 路线距离计算方法
pointDeal(){
/*获取里程*/
var _this = this;
var searchComplete = function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var plan = results.getPlan(0);
console.log(plan);
output += plan.getDuration(true) + "\n"; //获取时间
output += "总路程为：" ;
output += plan.getDistance(true) + "\n"; //获取距离
// 赋值给全局变量
_this.outputMileage = Number(plan.getDistance(true).substring(0,plan.getDistance(true).length-2));
_this.outputTime = plan.getDuration(true);
};
var output = '';
var map = this.newMap;
map.removeOverlay();
var transit = new BMap.DrivingRoute(map,
{
renderOptions: {map: map},
onSearchComplete: searchComplete,
onPolylinesSet: function(){
console.log(output);
}
}
);
transit.search(new BMap.Point(this.startLng, this.startLat) , new BMap.Point(this.endLng, this.endLat));
this.valueStartLine=new BMap.Point(this.startLng, this.startLat);
this.valueEndLine=new BMap.Point(this.endLng, this.endLat)
this.pathShow = true;
},
|
6.最终效果
参考：http://lbsyun.baidu.com/jsdemo.htm#i5_5
（本文为博主原创文章，转载请附上博文链接！）
