第0章基本信息
0.1百度地图资料
https://dafrok.github.io/vue-baidu-map/#/zh/index
0.2安装百度地图
npm install vue-baidu-map –save
0.3智城项目接入百度地图
在src/main.js里导入百度地图依赖包
import BaiduMap from 'vue-baidu-map'
第1章百度地图开发
1.1在线车辆开发
1.1.1百度地图初始化
<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>
参数说明:
属性名 |
类型 |
默认值 |
描述 |
play |
Boolean |
true |
是否行进 |
path |
Array[{lng, lat}] |
[] |
构成路线的坐标点数组 |
landmarkPois |
Array[{lng, lat, html, pauseTime}] |
[] |
要在覆盖物移动过程中显示的特殊点 |
icon |
Icon |
覆盖物的图标 |
|
speed |
Number |
4000 |
覆盖物移动速度 |
autoView |
Boolean |
false |
是否自动调整路线视野 |
rotation |
Boolean |
false |
移动物体是否随路径旋转朝向 |
infoWindow |
Boolean |
true |
是否开启移动物体上的信息窗体 |
content |
String |
信息窗体中的内容,无内容则不显示信息窗体 |
1.1.2百度地图路书事件写法
// 地图
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百度地图添加图层和事件
1.2.1添加图层
使用<div> <el-row><el-col>…</el-clo></el-row></div>方式来嵌入层,比如:
<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>
其中div建议使用相对宽度,图层所在位置可以设定相对位置,比如:
<div style="width:100%;height: 30px;margin:5px;border:1px solid #dcdcdc; background-color:#FFFFFF;">
如果是浮云图层使用如下:
<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让运行的目标在地图中间
<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>
其中JS事件是:
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
1.2.3运动的小车调整方向
主要事件如下:
/*设置小车方向*/
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百度地图运行轨迹画线
主要事件如下:
dynamicLine() {
this.hfjd = this.count; //进度条
if (this.count == this.bPoints.length) return;
this.driveline();
var sudutime = 10000 - this.sudu * 1000 == 0 ? 500 : 10000 - this.sudu * 1000; //控制速度
clearTimeout(this.timer1); //这不不能少
this.timer1 = setTimeout(this.dynamicLine, sudutime);
},
1.2.5去掉百度地图的LOGO
思路:添加一个图层,用于覆盖地图LOGO
样式如下:
#seekeducationbaidumap {
width: 100%;
height: 530px;
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
.anchorBL,
/*.anchorTR,*/
.BMap_zlHolder,
/*隐藏因为播放街景失败的"您未安装Flash Player播放器或者版本过低"提示图层导致无法继续点击地图*/
[id^=PanoramaFlashWraperTANGRAM] {
display: none;
visibility: hidden;
}
}