百度地图API前端开发技术分析

第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;

    }

}