專案中接到一個這樣的需求，需要展示公司所有員工在本市的住址分佈情況，需要展示員工資訊，需要展示本市疫情中風險地區並用紅色覆蓋，彈框展示資訊，以及快速定位該區域。

em。。。很緊急，領導要看。

來吧，二話不說開啟百度地圖api來研究，官方地址：http://lbsyun.baidu.com/

開啟api文件的時候，瞬間被潑冷水，公司網路不能使用，攔截掉了嗎？不服氣的我立馬申請了金鑰，建立了專案，寫了個例子，果不其然，攔截了。這裡沒有研究怎麼解決，畢竟公司大部分用的內網。時間緊急，放棄。。。

搗騰半天，發現百度地圖api有專門供vue使用的，可以百度搜vue-baidu-map，中文文件地址：https://dafrok.github.io/vue-baidu-map/#/zh/other/boundary。

寫了個小demo，發現還是有上面的問題。切到外網，就可以了，啊。。。咋整

突然想起以前寫的一個百度地圖覆蓋物的小筆記，哈，還可以這樣，不管了，先把功能整出來，上乾貨（這裡就不使用vue-baidu-map了，下次有需求再寫寫）

index.html檔案中引用，金鑰ak就不貼出來了，可以自己申請：http://lbsyun.baidu.com/apiconsole/key#/home

<script src="http://api.map.baidu.com/api?v=3.0&ak=xxx"></script>

index.vue檔案

<template>
    <
 
div class="home">
        <div class="title">
            <p>中風險地區：</p>
            <Row v-for="(item,index) in contentArray" :key="index">
                <Col class="ground"><span @click="goTake(index)">{{index+1}}、{{item}}</span></Col>
            </
 
Row>
        </div>
        <div style="position:absolute;top:0;left:0;z-index:998;width:100%;height:100%;border:#ccc solid 1px;font-size:12px" id="map"></div>
    </div>
</template>

initMap() {
    let map = new BMap.Map('map');
    let _this = this;
    _this.map = map;

    let point = new BMap.Point(121.48053886017651, 31.235929042252014) // 建立點座標
    map.centerAndZoom(point, 12) // 初始化地圖，設定中心點座標和地圖級別
    map.enableScrollWheelZoom(true) //開啟滑鼠滾輪縮放

    map.addControl(new BMap.NavigationControl()) //新增預設縮放平移控制元件
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})) //向地圖中新增比例尺控制元件
    map.addControl(new BMap.OverviewMapControl())
    map.addControl(new BMap.MapTypeControl())
    //map.setMapStyle({ style: 'midnight' }) //地圖風格
}

重點來了，如何在地圖上建立點覆蓋和區域劃分覆蓋，達到顯示員工資訊分佈和中風險地區顯示的目的。

首先點覆蓋，公司整了份線上excel文件，裡面有所有員工資訊，那麼如何把所有資訊都展示在地圖上呢，後臺很忙，沒空把這些資料匯入資料庫，再整個介面給我，所以自己想辦法唄，不就是轉成json資料嘛。。。百度搜索excel線上轉json，地址：http://www.jsonla.com/excel2json/，順便還格式化了一下，美滋滋

init() {
    this.custArr = require('../../../../static/json/person.json');
//             this.$axios.get(URL).then((res) => {
    //    this.custArr = res.data
       this.initMap();
       this.getPoints();
    // })
},

json放在了static檔案中，這裡沒有用axios，直接用的require，使用相對路徑是為了打包後路徑依然正確。相信用過這種獲取檔案方式的人都遇到過打包後路徑不對的問題，這裡不做考究。

var myGeo = new BMap.Geocoder();

this.custArr.forEach((item,index) => {
    if(!item.address) return
    myGeo.getPoint(item.address, function(point){
        if (point) {
            let address = new BMap.Point(point.lng, point.lat);//建立座標點
                // console.log(item.name,item.address,address)
            
            let opts = {
                width:250,
                height: 100,
                title: ''
            };
            let label = new BMap.Label(item.name,{offset:new BMap.Size(25,5)})
            label.setStyle({
                color: 'blue',
                borderRadius: '3px',
                borderColor: 'blue',
                padding: '0 3px',
                fontFamily: '微軟雅黑'
            });
            let content = '<div>';
                content += '<p style="height:20px;line-height:20px;">二級部門：' + item.department + '</p>';
                content += '<p style="height:20px;line-height:20px;">姓名：' + item.name + '</p>';
                content += '<p style="height:20px;line-height:20px;">手機號：' + item.phone + '</p>';
                content += '<p style="height:20px;line-height:20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title="'+item.address+'">住址：' + item.address + '</p>';
                content += '<p style="height:20px;line-height:20px;">小區名：' + item.village + '</p>';
            let infoWindows = new BMap.InfoWindow(content,opts);
            _this.addMarker(address,label,infoWindows);
        }
    },'中國');
})

if(this.boundariesArr.length != 0){
    setTimeout(function () {
        _this.getBoundary(map);
    }, 2000);
}

addMarker (points,label,infoWindows) {
    let greenIcon = new BMap.Icon(require("./images/greenIcon.png"), new BMap.Size(26, 26));
    let markers = new BMap.Marker(points, {icon: greenIcon});
    this.map.addOverlay(markers);
    markers.setLabel(label);
    markers.addEventListener("click",function (event) {
        this.map.openInfoWindow(infoWindows,points);//引數：視窗、點  根據點選的點出現對應的視窗
    });
},
getBoundary(map) {
    let polygons = [];

    let colors = ["#b95817", "#fff492", "#fff492"];

    let pointArray = [];
    this.boundariesArr.forEach(item => {
        var ply = new BMap.Polygon(item, { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多邊形覆蓋物
        ply.setFillColor(colors[0])   //設定多邊形的填充顏色
        ply.setFillOpacity(0.35);

        // ply.enableEditing();  //範圍可編輯
        polygons.push(ply);  //加入多邊形陣列，以之後獲取多邊形邊界點集

        map.addOverlay(ply);  //新增覆蓋物
        pointArray = pointArray.concat(ply.getPath());
    })
    // console.log(pointArray,123);
    // map.setViewport(pointArray);    //調整視野  
    this.addlabel(map);
},

這裡建立點覆蓋，和區域覆蓋貼了部分程式碼，大部分都是官網api就能看到。

最重要的問題來了，區域覆蓋，如何獲取行政區域區級以下邊界的點集，查了很多資料，大部分也沒有說出個所以然來，其實很簡單，百度地圖自己就帶有這樣的功能。

先上個地址：http://api.map.baidu.com/lbsapi/creatmap/， 一看是不是就明悟了一些

<--未完待續-->