vue项目中引入百度地图加入自定义样式，并添加点、面。

本文用的方式是直接引入script标签，并没有用vue-baidu-map插件.
首先看一下效果图

第一步:在vue项目中public下的index.html中引入

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=密钥" ></script>

第二步：引入自定义样式。
此处我用的是百度地图，个性化地图眼眸。文档地址：百度地图个性化地图。点击个性化地图-下载样式文件。在public文件夹下新建baiduMapStyle文件夹。将样式文件粘贴到该文件夹下。
第三步：初始化地图
页面中<div class="canvas-div"> <div :id="webGLContainer" class="mapstyle"/> </div>
js：引入import mapStyle from '../../../public/baiduMapStyle/custom_map_config.json'

在data中添加变量：

        mapStyle: {
            styleJson: mapStyle,
        },
        webGLContainer: "webGLContainer",

    //初始化地图
     initBaiduMap() {
        let imgUrl = '坐标点图片' //坐标点图标

        const myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(40, 40), {offset: new BMapGL.Size(24, 50)});
        const labelStyle = {
            color: '#FFFFFF',
            borderColor: '#266C4E',
            fontSize: '12px',
            height: '30px',
            lineHeight: '30px',
            fontFamily: '微软雅黑',
            backgroundColor: '#266C4E',
            borderRadius: '10px',
        }//标题样式

        const offsetStyle = new BMapGL.Size(-28, -80); //标题位置
        const polygonStyle = {
            strokeColor: 'blue',
            strokeWeight: 2,
            strokeOpacity: 0.3,
            fillColor: "blue",
            fillOpacity: 0.1
        }


        let map = new BMapGL.Map(this.webGLContainer);

        let point = new BMapGL.Point(106.37712142893031, 29.485214571521702);
        map.setHeading(64.5);   //设置地图旋转角度
        map.setTilt(20);       //设置地图的倾斜角度

        map.enableScrollWheelZoom(true);
        map.setMapStyleV2({styleJson: mapStyle});
        let marker = new BMapGL.Marker(point, {icon: myIcon});

        let label = new BMapGL.Label('白市驿镇', {position: point, offset: offsetStyle});
        label.setStyle(labelStyle);
        map.addOverlay(label);

        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE)
        let that = this;
        marker.addEventListener("click", function () {
            that.qryBuildingDetailInfo(1000000000000159);
            map.centerAndZoom(point, 20);
        });

        let point1 = new BMapGL.Point(106.372789, 29.492336);
        map.centerAndZoom(point1, 19);
        let marker1 = new BMapGL.Marker(point1, {icon: myIcon});
        map.addOverlay(marker1);
        marker1.addEventListener("click", function () {
            // alert("您点击了标注2");
            map.centerAndZoom(point1, 19);
        });

        let label1 = new BMapGL.Label('test1', {position: point1, offset: offsetStyle});
        label1.setStyle(labelStyle);
        map.addOverlay(label1);

        map.addOverlay(marker);

        //绘制面
        let polygon1_left = new BMapGL.Polygon([
            new BMapGL.Point(106.374253, 29.494246), //右上
            new BMapGL.Point(106.373337, 29.490175), //右下
            new BMapGL.Point(106.370714, 29.490489), //左下
            new BMapGL.Point(106.371936, 29.49434), //左上

        ], polygonStyle)
        map.addOverlay(polygon1_left)

        let polygon1_right = new BMapGL.Polygon([
            new BMapGL.Point(106.377263, 29.493782), //右上
            new BMapGL.Point(106.376472, 29.488921), //右下
            new BMapGL.Point(106.374217, 29.489059), //左下
            new BMapGL.Point(106.375205, 29.493931), //左上

        ], polygonStyle)
        map.addOverlay(polygon1_right)


        //画圆
        // let circle = new BMapGL.Circle(point, 100,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.3});
        // map.addOverlay(circle);


 
        let point2 = new BMapGL.Point(106.377586, 29.50225);
        let marker2 = new BMapGL.Marker(point2, {icon: myIcon});
        map.addOverlay(marker2);
        marker2.addEventListener("click", function () {
            // alert("您点击了标注2");
            map.centerAndZoom(point2, 19);
        });

        let label2 = new BMapGL.Label('test2', {position: point2, offset: offsetStyle});
        label2.setStyle(labelStyle);
        map.addOverlay(label2);
        let polygon2 = new BMapGL.Polygon([
            new BMapGL.Point(106.378691, 29.504399), //右上
            new BMapGL.Point(106.37808, 29.500199), //右下
            new BMapGL.Point(106.376185, 29.500545), //左下
            new BMapGL.Point(106.377038, 29.504399), //左上

        ], polygonStyle)
        map.addOverlay(polygon2)


        let point3 = new BMapGL.Point(106.375421, 29.498486);
        let marker3 = new BMapGL.Marker(point3, {icon: myIcon});
        map.addOverlay(marker3);
        marker3.addEventListener("click", function () {
            map.centerAndZoom(point3, 19);
        });

        let label3 = new BMapGL.Label('test3', {position: point3, offset: offsetStyle});
        label3.setStyle(labelStyle);
        map.addOverlay(label3);


        let polygon3 = new BMapGL.Polygon([
            new BMapGL.Point(106.376786, 29.499543), //右上
            new BMapGL.Point(106.376463, 29.497389), //右下
            new BMapGL.Point(106.374613, 29.497405), //左下
            new BMapGL.Point(106.374792, 29.49959), //左上

        ], polygonStyle)
        map.addOverlay(polygon3)



        let point4 = new BMapGL.Point(106.376009, 29.49579);
        let marker4 = new BMapGL.Marker(point4, {icon: myIcon});
        map.addOverlay(marker4);
        marker4.addEventListener("click", function () {
            map.centerAndZoom(point4, 19);
        });

        let label4 = new BMapGL.Label('test4', {position: point4, offset: offsetStyle});
        label4.setStyle(labelStyle);
        map.addOverlay(label4);

        let polygon4 = new BMapGL.Polygon([
            new BMapGL.Point(106.377361, 29.497059), //右上
            new BMapGL.Point(106.377325, 29.494765), //右下
            new BMapGL.Point(106.374918, 29.494953), //左下
            new BMapGL.Point(106.375466, 29.497087), //左上

        ], polygonStyle)
        map.addOverlay(polygon4)


        let point5 = new BMapGL.Point(106.380775, 29.507739);
        let marker5 = new BMapGL.Marker(point5, {icon: myIcon});
        map.addOverlay(marker5);
        marker5.addEventListener("click", function () {
            map.centerAndZoom(point5, 19);
        });

        let label5 = new BMapGL.Label('test5', {position: point5, offset: offsetStyle});
        label5.setStyle(labelStyle);
        map.addOverlay(label5);

        let polygon5 = new BMapGL.Polygon([
            new BMapGL.Point(106.382051, 29.508423), //右上
            new BMapGL.Point(106.381835, 29.506443), //右下
            new BMapGL.Point(106.380182, 29.506647), //左下
            new BMapGL.Point(106.380487, 29.508659), //左上

        ], polygonStyle)
        map.addOverlay(polygon5)



        let point6 = new BMapGL.Point(106.379252, 29.495629);
        let marker6 = new BMapGL.Marker(point6, {icon: myIcon});
        map.addOverlay(marker6);
        marker6.addEventListener("click", function () {
            map.centerAndZoom(point6, 19);
        });

        let label6 = new BMapGL.Label('test6', {position: point6, offset: offsetStyle});
        label6.setStyle(labelStyle);
        map.addOverlay(label6);
        let polygon6 = new BMapGL.Polygon([
            new BMapGL.Point(106.381026, 29.496934), //右上
            new BMapGL.Point(106.380667, 29.494419), //右下
            new BMapGL.Point(106.378044, 29.494356), //左下
            new BMapGL.Point(106.378188, 29.497342), //左上

        ], polygonStyle)
        map.addOverlay(polygon6)


     
        let point7 = new BMapGL.Point(106.373373, 29.496285);
        let marker7 = new BMapGL.Marker(point7, {icon: myIcon});
        map.addOverlay(marker7);
        marker7.addEventListener("click", function () {
            map.centerAndZoom(point7, 19);
        });

        let label7 = new BMapGL.Label('test7', {position: point7, offset: offsetStyle});
        label7.setStyle(labelStyle);
        map.addOverlay(label7);
        let polygon7 = new BMapGL.Polygon([
            new BMapGL.Point(106.374092, 29.497578), //右上
            new BMapGL.Point(106.374038, 29.495598), //右下
            new BMapGL.Point(106.372744, 29.495566), //左下
            new BMapGL.Point(106.372654, 29.497578), //左上

        ], polygonStyle)
        map.addOverlay(polygon7)


      
        let point8 = new BMapGL.Point(106.379167, 29.500254);
        let marker8 = new BMapGL.Marker(point8, {icon: myIcon});
        map.addOverlay(marker8);
        marker8.addEventListener("click", function () {
            map.centerAndZoom(point8, 19);
        });

        let label8 = new BMapGL.Label('test8', {position: point8, offset: offsetStyle});
        label8.setStyle(labelStyle);
        map.addOverlay(label8);
        let polygon8 = new BMapGL.Polygon([
            new BMapGL.Point(106.380739, 29.500973), //右上
            new BMapGL.Point(106.380416, 29.499307), //右下
            new BMapGL.Point(106.378367, 29.499276), //左下
            new BMapGL.Point(106.378808, 29.501346), //左上

        ], polygonStyle)
        map.addOverlay(polygon8)


       //绘制面
        let arr = [
            new BMapGL.Point(106.379109, 29.511405), 
            new BMapGL.Point(106.378677, 29.511209),
            new BMapGL.Point(106.378165, 29.510989),
            new BMapGL.Point(106.377743, 29.510934),
            new BMapGL.Point(106.377779, 29.510769),
            new BMapGL.Point(106.377492, 29.510706),
            new BMapGL.Point(106.376638, 29.5108),
            new BMapGL.Point(106.376441, 29.510085),
            new BMapGL.Point(106.376566, 29.509802),
            new BMapGL.Point(106.376503, 29.507893),

            new BMapGL.Point(106.377195,29.507806),
            new BMapGL.Point(106.378489,29.507759),
            new BMapGL.Point(106.379935,29.507366),
            new BMapGL.Point(106.378363,29.506266),
            new BMapGL.Point(106.374985,29.506329),
            new BMapGL.Point(106.375102,29.505425),
            new BMapGL.Point(106.375929,29.505024),
            new BMapGL.Point(106.376539,29.503893),
            new BMapGL.Point(106.376009,29.502722),
            new BMapGL.Point(106.376,29.5017),

            new BMapGL.Point(106.375497,29.501731),
            new BMapGL.Point(106.374366,29.500788),
            new BMapGL.Point(106.373638,29.499547),
            new BMapGL.Point(106.372776,29.498832),
            new BMapGL.Point(106.372299,29.496521),


            new BMapGL.Point(106.371972,29.494576),
            new BMapGL.Point(106.37172,29.49423),
            new BMapGL.Point(106.370768,29.492878),
            new BMapGL.Point(106.370696,29.491652),
            new BMapGL.Point(106.370301,29.490536),
            new BMapGL.Point(106.370534,29.489294),
            new BMapGL.Point(106.380523,29.488131),
            new BMapGL.Point(106.382518,29.491134),
            new BMapGL.Point(106.381062,29.491196),
            new BMapGL.Point(106.380937,29.492627),
            new BMapGL.Point(106.380541,29.492988),


            new BMapGL.Point(106.381871,29.502246),
            new BMapGL.Point(106.383308,29.503739),
            new BMapGL.Point(106.383308,29.506537),
            new BMapGL.Point(106.383254,29.509617),
            new BMapGL.Point(106.382625,29.51122),

        ]

        let hole = new BMapGL.Polygon(arr, {
            strokeColor: '#266C4E', //边线颜色
            strokeWeight: 6,
            strokeOpacity: 1,
            strokeStyle: 'solid',
            fillOpacity: 0
        })
        map.addOverlay(hole);
    },