Chapter 0 Basic Information
0.1 Baidu map data
https://dafrok.github.io/vue-baidu-map/#/zh/index
0.2 Install Baidu map
npm install vue-baidu-map –save
0.3 Smart city project connected to Baidu map
Import Baidu map dependency package in src/main.js
import BaiduMap from 'vue-baidu-map'
Chapter 1 Baidu Map Development
1.1 Online vehicle development
1.1.1 Baidu map initialization
<baidu-map class="map" :center="{lng:129.500,lat:42.893}" :zoom="11">
<bm-driving start="延吉市公安局出入境接待大厅"
end="延吉朝阳川国际机场"
@searchcomplete="handleSearchComplete"
:panel="false"
:autoViewport="true"></bm-driving>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bml-lushu
@stop="reset"
:path="path"
:icon="icon"
:play="play"
:speed="speed"
:rotation="true">
</bml-lushu>
</baidu-map>Parameter Description:
| attribute name |
type |
Defaults |
describe |
| play |
Boolean |
true |
whether to go |
| path |
Array[{lng, lat}] |
[] |
An array of coordinate points that make up the route |
| landmarkPois |
Array[{lng, lat, html, pauseTime}] |
[] |
Special points to display during overlay movement |
| icon |
Icon |
overlay icon |
|
| speed |
Number |
4000 |
Cover movement speed |
| autoView |
Boolean |
false |
Whether to automatically adjust the route view |
| rotation |
Boolean |
false |
Whether the moving object rotates with the path |
| infoWindow |
Boolean |
true |
Whether to open the information window on the moving object |
| content |
String |
The content in the information window, if there is no content, the information window will not be displayed |
1.1.2 Baidu map road book event writing method
// 地图
getLogBusDriveList(){
let form = {}
form['startTime'] = this.afterVal;//'2020-12-14 8:26:00'
form['endTime'] = this.dateVal;//'2020-12-14 8:27:00'
getLogBusDriveList(form).then((res) => {
if(res.data && res.data.code === 0){
let list = res.data.data.page.list
let busIds = [];
let newBusIds = [];
for(let i = 0; i < list.length; i++){
busIds.push(list[i].busId);
this.mapList[0].path[i].lng = list[i].factoryLongitude
this.mapList[0].path[i].lat = list[i].factoryLatitude
}
//去重
for(let j=0;j<busIds.length;j++){
if(newBusIds.indexOf(busIds[j])<0){
newBusIds.push(busIds[j]);
}
}
this.center.lng = list[0].factoryLongitude
this.center.lat = list[0].factoryLatitude
console.log(this.center)
}
});
},
1.2 Add layers and events to Baidu map
1.2.1 Add layers
Use <div> <el-row><el-col>…</el-clo></el-row></div> to embed layers, for example:
<div
class="center-left"
style="width: calc(22.5% - 30px);border: 1px solid #dcdcdc;padding: 10px;"
>
<el-row :span="24">
<el-col :span="24">
<div style="margin: 5px">
<el-image
v-if="carInfo.vehiclePhoto!=null&&carInfo.vehiclePhoto!=''"
:src="carInfo.vehiclePhoto"
style="width: 100%;height: 180px;"
fit="contain"
></el-image>
<el-image
v-else
:src="require('../../assets/lenglianche.jpg')"
style="width: 100%;height: 180px;"
fit="contain"
></el-image>
</div>
</el-col>
</el-row>Among them, it is recommended to use relative width for div, and the relative position can be set for the position of the layer, for example:
<div style="width:100%;height: 30px;margin:5px;border:1px solid #dcdcdc; background-color:#FFFFFF;">
If it is a floating cloud layer, use the following:
<div style="float: left;line-height: 30px;width: 140px;margin-left: 5px">
<span style="font-size: 14px;" v-if="sudustartTime!=''">{ {sudustartTime}}</span>
<span style="font-size: 14px;" v-else>{ {startTime}}</span>
</div>
1.2.2 Let the running target be in the middle of the map
<bml-marker-clusterer :averageCenter="true">
<bm-marker
v-for="(item,i) in pink"
:position="{lat: item.lat, lng: item.lng}"
:dragging="false"
:key="i"
>
<bm-label
:content="item.title"
:labelStyle="{cursor:'pointer',fontFamily:'MicrosoftYaHei',color: '#0065B3', fontSize : '14px',padding:'5px 8px',borderColor:'#159fb3',backgroundColor:'rgb(227,227,227)',borderRadius:'5px'}"
:offset="{width: -50, height: -35}"
></bm-label>
</bm-marker>
</bml-marker-clusterer>where the JS event is:
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
1.2.3 Adjust the direction of the moving car
The main events are as follows:
/*设置小车方向*/
getAngle(n, next) {
//console.log("ssad",n)
//console.log("ssad",next)
var ret;
var w1 = (n.lat / 180) * Math.PI;
var j1 = (n.lng / 180) * Math.PI;
var w2 = (next.lat / 180) * Math.PI;
var j2 = (next.lng / 180) * Math.PI;
ret =
4 * Math.pow(Math.sin((w1 - w2) / 2), 2) -
Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
ret = Math.sqrt(ret);
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
//console.log(temp)
ret = ret / temp;
ret = (Math.atan(ret) / Math.PI) * 180;
ret += 90;
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if (j1 - j2 < 0) {
// console.log('j1<j2')
if (w1 - w2 < 0) {
// console.log('w1<w2')
ret;
} else {
// console.log('w1>w2')
ret = -ret + 180;
}
} else {
// console.log('j1>j2')
if (w1 - w2 < 0) {
// console.log('w1<w2')
ret = 180 + ret;
} else {
// console.log('w1>w2')
ret = -ret;
}
}
return ret;
},1.2.4 Baidu map running track drawing line
The main events are as follows:
dynamicLine() {
this.hfjd = this.count; //progress bar
if (this.count == this.bPoints.length) return;
this.driveline();
var sudutime = 10000 - this.sudu * 1000 == 0 ? 500 : 10000 - this.sudu * 1000; //Control speed
clearTimeout(this.timer1); //This is necessary
this.timer1 = setTimeout(this.dynamicLine, sudutime);
},
1.2.5 Remove the LOGO of Baidu Map
Idea: Add a layer to cover the map LOGO
The style is as follows:
#seekeducationbaidumap {
width: 100%;
height: 530px;
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
.anchorBL,
/*.anchorTR,*/
.BMap_zlHolder,
/*隐藏因为播放街景失败的"您未安装Flash Player播放器或者版本过低"提示图层导致无法继续点击地图*/
[id^=PanoramaFlashWraperTANGRAM] {
display: none;
visibility: hidden;
}
}