在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示

在vue中使用百度地图API，超详细步骤

KIKIo_

3883人浏览 · 2021-12-19 15:46:37

KIKIo_ · 2021-12-19 15:46:37 发布

文章目录

1、在vue中引入百度地图的script

在public/index中引入

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你自己的key"></script>

ak的获取
1、先进入百度地图api的网页，点击控制台

2、创建自己的应用，就可以获得AK

2、生成想要的地图样式

1、点击这里的超链接自定义地图样式编辑器
或者按照如下步骤
在这里插入图片描述
2、点击新建就可以创建地图，按照自己的想法编辑完成后，下载json文件（在右下角）

注因为我自己没有搭建后台，所以直接转换成js文件 import进vue中

3、生成地图

这里记得设置地图的大小不然没有显示

<template>
  <div class="drawer">
    <div id="allmap" style="width: 100%; height: 700px"></div>
  </div>
</template>

<script>
import mapstyle from "./mapstyle.js";
export default {
  props: {},
  data() {
    return {
      mapstyle: [],
    };
  },
  mounted() {
    this.getstyle();
    this.mapInit();
  },
  methods: {
    // 获取地图样式
    getstyle() {
      this.mapstyle = mapstyle;
    },
    // 获取标记点信息
    getLocationInfo() {
      this.LocationInfo = LocationInfo;
    },
    mapInit() {
      this.map = new BMapGL.Map("allmap");
      var map = new BMapGL.Map("allmap");
      var point = new BMapGL.Point(114.42586, 23.129122); //中心点经纬度
      map.centerAndZoom(point, 10);
      map.setTilt(60);//倾斜角
      map.enableScrollWheelZoom();
      map.setMapStyleV2({ styleJson: this.mapstyle });
    },
  },
};
</script>
<style scoped>
</style>

在这里插入图片描述

4、创建3d棱柱

这里的能建立3D棱柱的最小单位只能是县区以上，乡镇并不能创建3d棱柱

var bd = new BMapGL.Boundary();
      // 给某一个省 市 县 设置3d棱柱
      bd.get("惠城区", function (rs) {
        var count = rs.boundaries.length; //行政区域的点有多少个
        var pointArray = [];
        for (var i = 0; i < count; i++) {
          var path = [];
          var str = rs.boundaries[i].replace(" ", "");
          var points = str.split(";");
          for (var j = 0; j < points.length; j++) {
            var lng = points[j].split(",")[0];
            var lat = points[j].split(",")[1];
            path.push(new BMapGL.Point(lng, lat));
          }
          var prism = new BMapGL.Prism(path, 5000, {
            topFillColor: "#5679ea",
            topFillOpacity: 0.5,
            sideFillColor: "#5679ea",
            sideFillOpacity: 0.9,
          });
          map.addOverlay(prism);
        }
      });

在这里插入图片描述

5、设置标记点和提示框

      var marker = new Array();
      var sContent = new Array();
      var infoWindow = new Array();
      var label = new Array();
      for (let i in this.LocationInfo) {
        // 创建添加点标记
        marker[i] = new BMapGL.Marker(
          new BMapGL.Point(
            this.LocationInfo[i].positionx,
            this.LocationInfo[i].positiony
          )
        );
        map.addOverlay(marker[i]);
        sContent[i] =
          '<div><img width="200" object-fit: fill src=' +
          this.LocationInfo[i].img +
          "><p>" +
          this.LocationInfo[i].content +
          "</p></div>";
        infoWindow[i] = new BMapGL.InfoWindow(sContent[i]);
        label[i] = new BMapGL.Label(this.LocationInfo[i].name, {
          offset: new BMapGL.Size(-20, 0),
        });
        label[i].setStyle({ 
            color : "#fff", 
            fontSize : "14px", 
            backgroundColor :"0.05",
            backgroundColor:"#3e5697",
            border :"0", 
            fontWeight :"bold" 
        });
        marker[i].setLabel(label[i]);
        // marker添加点击事件
        marker[i].addEventListener("click", function (evt) {
          // 创建图文信息窗口
          this.openInfoWindow(infoWindow[i]);
        });
      }

在这里插入图片描述

我的标记点数据样例

在这里插入图片描述

6、代码总结

baidu.vue

<template>
  <div class="drawer">
    <div id="allmap" style="width: 100%; height: 700px"></div>
  </div>
</template>

<script>
import mapstyle from "./mapstyle.js";
import LocationInfo from "./baiduinfo";
export default {
  props: {},
  data() {
    return {
      mapstyle: [],
      LocationInfo: [],
    };
  },
  mounted() {
    this.getstyle();
    this.getLocationInfo();
    this.mapInit();
  },
  methods: {
    // 获取地图样式
    getstyle() {
      this.mapstyle = mapstyle;
    },
    // 获取标记点信息
    getLocationInfo() {
      this.LocationInfo = LocationInfo;
    },
    mapInit() {
      this.map = new BMapGL.Map("allmap");
      var map = new BMapGL.Map("allmap");
      var point = new BMapGL.Point(114.42586, 23.129122); //中心点经纬度
      map.centerAndZoom(point, 10);
      map.setTilt(60);//倾斜角
      map.enableScrollWheelZoom();
      map.setMapStyleV2({ styleJson: this.mapstyle });

      var bd = new BMapGL.Boundary();
      // 给某一个省 市 县 设置3d棱柱
      bd.get("惠城区", function (rs) {
        var count = rs.boundaries.length; //行政区域的点有多少个
        var pointArray = [];
        for (var i = 0; i < count; i++) {
          var path = [];
          var str = rs.boundaries[i].replace(" ", "");
          var points = str.split(";");
          for (var j = 0; j < points.length; j++) {
            var lng = points[j].split(",")[0];
            var lat = points[j].split(",")[1];
            path.push(new BMapGL.Point(lng, lat));
          }
          var prism = new BMapGL.Prism(path, 5000, {
            topFillColor: "#5679ea",
            topFillOpacity: 0.5,
            sideFillColor: "#5679ea",
            sideFillOpacity: 0.9,
          });
          map.addOverlay(prism);
        }
      });
      
      var marker = new Array();
      var sContent = new Array();
      var infoWindow = new Array();
      var label = new Array();
      for (let i in this.LocationInfo) {
        // 创建添加点标记
        marker[i] = new BMapGL.Marker(
          new BMapGL.Point(
            this.LocationInfo[i].positionx,
            this.LocationInfo[i].positiony
          )
        );
        map.addOverlay(marker[i]);
        sContent[i] =
          '<div><img width="200" object-fit: fill src=' +
          this.LocationInfo[i].img +
          "><p>" +
          this.LocationInfo[i].content +
          "</p></div>";
        infoWindow[i] = new BMapGL.InfoWindow(sContent[i]);
        label[i] = new BMapGL.Label(this.LocationInfo[i].name, {
          offset: new BMapGL.Size(-20, 0),
        });
        label[i].setStyle({ 
            color : "#fff", 
            fontSize : "14px", 
            backgroundColor :"0.05",
            backgroundColor:"#3e5697",
            border :"0", 
            fontWeight :"bold" 
        });
        marker[i].setLabel(label[i]);
        // marker添加点击事件
        marker[i].addEventListener("click", function (evt) {
          // 创建图文信息窗口
          this.openInfoWindow(infoWindow[i]);
        });
      }
    },
  },
};
</script>


<style scoped>
</style>

baiduinfo.js

let LocationInfo = [{
    "id":1,
    "name":"桥东街道",
    "positionx":"114.426373",
    "positiony":"23.0908993",
    "content":"这里是桥东街道",
    "img":"https://img0.baidu.com/it/u=3901965293,3444868679&fm=26&fmt=auto"
},{
    "id":2,
    "name":"桥西街道",
    "positionx":"114.417599",
    "positiony":"23.079812",
    "content":"这里是桥西街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":3,
    "name":"江南街道",
    "positionx":"114.396562",
    "positiony":"23.110197",
    "content":"这里是江南街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":4,
    "name":"江北街道",
    "positionx":"114.420806",
    "positiony":"23.115994",
    "content":"这里是江北街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":5,
    "name":"龙丰街道",
    "positionx":"114.401526",
    "positiony":"23.063567",
    "content":"这里是龙丰街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":6,
    "name":"河南岸街道",
    "positionx":"114.426138",
    "positiony":"23.079581",
    "content":"这里是河南岸街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":7,
    "name":"惠环街道",
    "positionx":"114.346629",
    "positiony":"23.015378",
    "content":"这里是惠环街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":8,
    "name":"陈江街道",
    "positionx":"114.32508",
    "positiony":"23.013933",
    "content":"这里是陈江街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":9,
    "name":"桥东街道",
    "positionx":"114.471748",
    "positiony":"23.111505",
    "content":"这里是水口街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":10,
    "name":"小金口街道",
    "positionx":"114.42623",
    "positiony":"23.176139",
    "content":"这里是小金口街道",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":11,
    "name":"汝湖镇",
    "positionx":"114.465195",
    "positiony":"23.183424",
    "content":"这里是汝湖镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":12,
    "name":"三栋镇",
    "positionx":"114.455009",
    "positiony":"22.997408",
    "content":"这里是三栋镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":13,
    "name":"沥林镇",
    "positionx":"114.244869",
    "positiony":"22.982499",
    "content":"这里是沥林镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":14,
    "name":"潼湖镇",
    "positionx":"114.203076",
    "positiony":"23.088502",
    "content":"这里是潼湖镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":15,
    "name":"马安镇",
    "positionx":"114.48847",
    "positiony":"23.069326",
    "content":"这里是马安镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":16,
    "name":"横沥镇",
    "positionx":"114.621393",
    "positiony":"23.162301",
    "content":"这里是横沥镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":17,
    "name":"芦洲镇",
    "positionx":"114.530738",
    "positiony":"23.371823",
    "content":"这里是芦洲镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{
    "id":18,
    "name":"潼侨镇",
    "positionx":"114.306894",
    "positiony":"23.040896",
    "content":"这里是潼侨镇",
    "img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
}]
module.exports = LocationInfo

mapstyle.js

var styleJson = [{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
        "color": "#242f3eff"
    }
}, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
        "color": "#242f3eff"
    }
}, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
        "color": "#17263cff"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631ff"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "districtlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#17263cff",
        "weight": 3
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#17263cff",
        "weight": 3
    }
}, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
        "color": "#263b3eff"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d0021bff"
    }
}, {
    "featureType": "nationalwaysign",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#ffffffff"
    }
}, {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#17263cff"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#242f3eff"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#38414eff"
    }
}, {
    "featureType": "local",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#38414eff"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#38414eff"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#ffffff00"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631ff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631ff"
    }
}, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631ff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631ff"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
        "color": "#9e7d60ff"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#554631fa"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "medicallabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "entertainmentlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "estatelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "companylabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "governmentlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "governmentlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "restaurantlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "hotellabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "shoppinglabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "carservicelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "financelabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "otherlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "on"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#17263cff"
    }
}, {
    "featureType": "airportlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "highway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "provincialway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "8"
    }
}, {
    "featureType": "provincialway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "9"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "8"
    }
}, {
    "featureType": "provincialway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "9"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "8"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "8,9",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "6"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "7"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "8"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "9"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "6,10",
        "level": "10"
    }
}, {
    "featureType": "arterial",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "9"
    }
}, {
    "featureType": "arterial",
    "stylers": {
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "10"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "9"
    }
}, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "10"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "9"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
        "visibility": "off",
        "curZoomRegionId": "0",
        "curZoomRegion": "9,10",
        "level": "10"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.topfill",
    "stylers": {
        "color": "#2a3341ff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.sidefill",
    "stylers": {
        "color": "#313b4cff"
    }
}, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
        "color": "#1a212eff"
    }
}, {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#759879ff"
    }
}, {
    "featureType": "provincialway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "cityhighway",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "arterial",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#1a2e1cff"
    }
}, {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.fill",
    "stylers": {
        "color": "#d69563ff"
    }
}, {
    "featureType": "manmade",
    "elementType": "labels.text.stroke",
    "stylers": {
        "color": "#17263cff"
    }
}, {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels.icon",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "transportationlabel",
    "elementType": "labels",
    "stylers": {
        "visibility": "off"
    }
}, {
    "featureType": "estate",
    "elementType": "geometry",
    "stylers": {
        "color": "#2a3341ff"
    }
}];

module.exports = styleJson

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

KIKIo_

@weixin_46738453

已为社区贡献1条内容