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