Análisis de tecnología de desarrollo front-end de API de mapa de Baidu

Capítulo 0 Información básica

0.1 Datos del mapa de Baidu

https://dafrok.github.io/vue-baidu-map/#/zh/index

0.2 Instalar el mapa de Baidu

npm install vue-baidu-map –guardar

0.3 Proyecto de ciudad inteligente conectado al mapa de Baidu

Importe el paquete de dependencia del mapa de Baidu en src/main.js

importar BaiduMap desde 'vue-baidu-map'

Capítulo 1 Desarrollo del mapa de Baidu

1.1 Desarrollo de vehículos en línea

1.1.1 Inicialización del mapa de Baidu

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

Descripción de parámetros:

Nombre del Atributo	tipo	valores predeterminados	describir
jugar	booleano	verdadero	ya sea para ir
camino	Matriz[{lng, lat}]	[]	Una matriz de puntos de coordenadas que componen la ruta.
punto de referenciaPois	Matriz[{lng, lat, html, pauseTime}]	[]	Puntos especiales para mostrar durante el movimiento de superposición
icono	Icono		icono de superposición
velocidad	Número	4000	Velocidad de movimiento de la cubierta
vista automática	booleano	FALSO	Ya sea para ajustar automáticamente la vista de ruta
rotación	booleano	FALSO	Si el objeto en movimiento gira con la trayectoria
ventana de información	booleano	verdadero	Ya sea para abrir la ventana de información sobre el objeto en movimiento
contenido	Cadena		El contenido en la ventana de información, si no hay contenido, la ventana de información no se mostrará

1.1.2 Método de escritura de eventos del libro de ruta del mapa de Baidu

// 地图

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 Agregar capas y eventos al mapa de Baidu

1.2.1 Agregar capas

Use <div> <el-row><el-col>…</el-clo></el-row></div> para incrustar capas, por ejemplo:

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

Entre ellos, se recomienda usar el ancho relativo para div, y la posición relativa se puede establecer para la posición de la capa, por ejemplo:

<div style="width:100%;height: 30px;margin:5px;border:1px solid #dcdcdc; background-color:#FFFFFF;">

Si se trata de una capa de nubes flotantes, utilice lo siguiente:

<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 Deje que el objetivo móvil esté en el medio del mapa

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

donde está el evento JS:

sincronizarCentroYZoom (e) {

    const {lng, lat} = e.target.getCenter()

    este.centro.lng = lng

    este.centro.lat = lat

    this.zoom = e.objetivo.getZoom()

},

1.2.3 Ajustar la dirección del coche en movimiento

Los principales eventos son los siguientes:

/*设置小车方向*/

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 Línea de dibujo de la pista de atletismo del mapa de Baidu

Los principales eventos son los siguientes:

líneadinámica() {

    this.hfjd = this.count;//barra de progreso

    if (this.count == this.bPoints.length) return;

    this.driveline();

    var sudutime = 10000 - this.sudu * 1000 == 0 ? 500 : 10000 - this.sudu * 1000 //Control de velocidad

    clearTimeout(this.timer1);//Esto es necesario

    this.timer1 = setTimeout(this.dynamicLine, sudutime);

},

1.2.5 Eliminar el LOGOTIPO del mapa de Baidu

Idea: Añadir una capa para cubrir el LOGOTIPO del mapa

El estilo es el siguiente:

#seekeducationbaidumap {

    width: 100%;

    height: 530px;

    /*

      去除百度地图版权

      去除右上角[地图、卫星、三维]控件

      去除百度地图右上角平移缩放控件的市县区文字

      */



    .anchorBL,

        /*.anchorTR,*/

    .BMap_zlHolder,

        /*隐藏因为播放街景失败的"您未安装Flash Player播放器或者版本过低"提示图层导致无法继续点击地图*/

    [id^=PanoramaFlashWraperTANGRAM] {

        display: none;

        visibility: hidden;

    }

}

Análisis de tecnología de desarrollo front-end de API de mapa de Baidu

Supongo que te gusta