vue中使用百度地圖

vue-cli創建的項目中使用百度地圖，樣式如下：

 

 根據后台返回的不同的信息，展示不同的標記以及對應的標記信息，點擊鼠標后展示彈窗

首先，引入vue-baidu-map，以展示地圖，對應的命令是

npm install vue-baidu-map --save

然后，在main.js中完成全局注冊

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平台申請的密鑰 
  ak: 'YOUR_APP_KEY'
})

然后在頁面中應用

<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="init"></baidu-map>

綁定的ready是地圖的初始化信息，center和zoom一定更要寫，不然會導致地圖無法出現。下面是數據結構以及一些對應的字段

data() {
    return {
        center: {
            lng: 109.45744048529967,
            lat: 36.49771311230842
        },
        zoom: 13,
        mapData: [],
        people: [{
            lng: 109.45744048529967,
            lat: 36.49771311230842,
            type: 'people',
            orderNum: 5
        }, {
            lng: 110.45744048529967,
            lat: 35.49771311230842,
            type: 'people',
            orderNum: 3
        }],
        orders: [{
            lng: 109.75744048529967,
            lat: 36.49771311230842,
            type: 'order',
            stayTime: '12'
        }, {
            lng: 109.45744048529967,
            lat: 36.89771311230842,
            type: 'order',
            stayTime: '3'
        }],
        tabList: [{
            name: '全部顯示',
            type: 'all'
        }, {
            name: '僅顯示人員',
            type: 'people'
        }, {
            name: '僅顯示訂單',
            type: 'order'
        }],
        currentTab: 'all',
        map: null,
        infoBox: null,
        content: '',
        opts: null
    };
},

 

下面是地圖的初始化

init({BMap, map}) {
    this.map = map;
    // 初始化地圖,設置中心點坐標
    var point = new BMap.Point(119.80250895, 25.48905564);
    map.centerAndZoom(point, 14);
    this.setMarker();
    // 添加鼠標滾動縮放
    map.enableScrollWheelZoom();
},

 之后就是根據不同的數據設置不同的標記點

setMarker() {
    var pointArray = [];
    if (this.mapData.length > 0) {
        // 清除地圖上的覆蓋物
        this.map.clearOverlays();
        for (var i = 0; i < this.mapData.length; i++) {
            var pt = new BMap.Point(this.mapData[i].lng, this.mapData[i].lat);
            pointArray.push(pt);
            if (this.mapData[i].type == 'order' && this.mapData[i].stayTime < 12) {
                var myIcon = new BMap.Icon(require('@/assets/image/icon_order_green.png'), new BMap.Size(40, 40));
            }
            if (this.mapData[i].type == 'order' && this.mapData[i].stayTime >= 12) {
                var myIcon = new BMap.Icon(require('@/assets/image/icon_order_yellow.png'), new BMap.Size(40, 40));
            }
            if (this.mapData[i].type == 'people' && this.mapData[i].orderNum < 5) {
                var myIcon = new BMap.Icon(require('@/assets/image/icon_person_green.png'), new BMap.Size(40, 40));
            }
            if (this.mapData[i].type == 'people' && this.mapData[i].orderNum >= 5) {
                var myIcon = new BMap.Icon(require('@/assets/image/icon_person_red.png'), new BMap.Size(40, 40));
            }
            myIcon.setImageSize(new BMap.Size(40, 40));

            var marker = new BMap.Marker(pt, {
                icon: myIcon
            }); // 創建標注
            this.map.addOverlay(marker);
            this.addClickHandler(this.mapData[i], marker);
            var item = this.mapData[i];
        }
        var view = this.map.getViewport(pointArray);
        var mapZoom = view.zoom;
        var centerPoint = view.center;
        this.map.centerAndZoom(centerPoint, mapZoom);
    }
},

注意，引入本地圖片的時候需要用require引入，再然后就是點擊標記的時候顯示的彈窗

// 點擊標記顯示信息窗口
addClickHandler(item, marker) {
    marker.addEventListener('click', e = > {
        if (item.type == 'order') {
            this.content = `
           <div class="pop_container" ref="popContainer">
              <section>
                 <p><label>到單時間：</label><span>2020-07-16 12:30</span></p>
                 <p><label>訂單地址：</label><span>嘉興中威苑12幢</span></p>
                 <p><label>業務號碼：</label><span>122232543564656</span></p>
                 <p><label>裝機單號：</label><span>122232543564656</span></p>
              </section>
              <section>
                 <p>${item.stayTime}H</p>
                 <p>留單時間</p>
              </section>
          </div>
                        `;

          this.opts = {
            width: 400,
            height: 150,
            enableMessage: true
          };
    }
    if (item.type == 'people') {
       this.content = `
         <div class="pop_container people_container">
           <section>
             <p><label>裝機經理：</label><span>張曉松（1234567）</span></p>
             <p><label>簽到時間：</label><span>2020-07-16 12:30</span></p>
           </section>
           <section>
             <p>${item.orderNum}張</p>
             <p>剩余訂單</p>
           </section>
        </div>
                        `;

            this.opts = {
                width: 400,
                height: 100,
                enableMessage: true
            };
        }
        this.titleName = item.deviceCode ? item.deviceCode : item.buildingName;
        var p = marker.getPosition(); //獲取marker的位置
        var marker1 = new BMap.Marker(new BMap.Point(p.lng, p.lat));
        this.openInfo(item, marker1);
    });
}, 
openInfo(item, p) {
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(this.content, this.opts); // 創建信息窗口對象
    this.map.openInfoWindow(infoWindow, point); //開啟信息窗口
    setTimeout(() = > {
        if ((item.type == 'order' && item.stayTime < 12) || (item.type == 'people' && item.orderNum < 5)) {
            document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(26,179,148,0.8)';
        }
        if (item.type == 'order' && item.stayTime >= 12) {
            document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(248,172,89,0.8)';
        }
        if (item.type == 'people' && item.orderNum >= 5) {
            document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(230,93,93,0.8)';
        }
    }, 100);
}

下面是地圖樣式的改寫

.anchorBL,
.BMap_cpyCtrl {
    display: none;
}

.BMap_bubble_title {
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    padding-top: 5px;
    border-bottom: 1px solid gray;
    background-color: #0066b3;
}
/* 消息內容 */
.BMap_bubble_content {
    background-color: rgba(40, 40, 40, 0.8);
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* 內容 */
.BMap_pop div:nth-child(9) {
    top: 35px !important;
    border-radius: 7px;
}

.BMap_pop div:nth-child(5) {
    display: none;
}
/* 左上角刪除按鍵 */
.BMap_pop img {
    // top: 43px !important;
    // left: 215px !important;
    display: none;
}

.BMap_top {
    display: none;
}

.BMap_bottom {
    display: none;
}

.BMap_center {
    display: none;
}
/* 隱藏邊角 */
.BMap_pop div:nth-child(1) div {
    display: none;
}

.BMap_pop div:nth-child(3) {
    display: none;
}

.BMap_pop div:nth-child(7) {
    display: none;
}