百度地図APIフロントエンド開発技術分析

第0章基本情報

0.1百度地図データ

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

0.2百度地図をインストールする

npm install vue-baidu-map –save

0.3百度地図と連携したスマートシティプロジェクト

Baidu マップの依存関係パッケージを src/main.js にインポートする

「vue-baidu-map」からBaiduMapをインポートします

第1章百度地図の開発

1.1オンライン車両開発

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

パラメータの説明:

属性名	タイプ	デフォルト	説明
遊ぶ	ブール値	真実	行くかどうか
道	配列[{lng, lat}]	[]	ルートを構成する座標点の配列
ランドマークポワ	配列[{lng, lat, html, stopTime}]	[]	オーバーレイの移動中に表示する特別なポイント
アイコン	アイコン		オーバーレイアイコン
スピード	番号	4000	カバーの移動速度
自動表示	ブール値	間違い	ルートビューを自動調整するかどうか
回転	ブール値	間違い	移動オブジェクトがパスに合わせて回転するかどうか
情報ウィンドウ	ブール値	真実	移動物体の情報ウィンドウを開くかどうか
コンテンツ	弦		インフォメーションウィンドウの内容、コンテンツがない場合はインフォメーションウィンドウは表示されません

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 Baidu マップにレイヤーとイベントを追加する

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ソリッド#dcdcdc;background-color:#FFFFFF;">

浮遊雲レイヤーの場合は、次を使用します。

<div style="float: left;line-height: 30px;width: 140px;margin-left: 5px">

<スパンスタイル="font-size: 14px;" v-if="sudustartTime!=''">{ {sudustartTime}}</span>

<スパンスタイル="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 = 緯度

    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百度地図のロゴを削除する

アイデア: マップのロゴを覆うレイヤーを追加します。

スタイルは次のとおりです。

#seekeducationbaidumap {

    width: 100%;

    height: 530px;

    /*

      去除百度地图版权

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

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

      */



    .anchorBL,

        /*.anchorTR,*/

    .BMap_zlHolder,

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

    [id^=PanoramaFlashWraperTANGRAM] {

        display: none;

        visibility: hidden;

    }

}

百度地図APIフロントエンド開発技術分析

おすすめ