/**
 * 顶部header
 */
Vue.component("baidu-maps", {
    template: `
        <div class="baidu-map" ref="allMap"></div>
        
    `,
    props: {
        data:{
            type:Array
        }
    },
    data() {
        return {
            skyMap:'',
            key:0,
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.initMap()
            this.getIconMap()
            this.setMapStyle()
        },
        initMap(){
            // GL版命名空间为BMapGL
            var map = new BMapGL.Map(this.$refs.allMap);    // 创建Map实例,
            map.centerAndZoom(new BMapGL.Point(104.509823,35.09362), 6);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            this.skyMap = map;
        },
        getIconMap(){
            var map = this.skyMap
            map.clearOverlays();
            var pointArray =new Array()
            for(let i = 0; i <this.data.length ; i++) {
                pointArray[i] = new BMapGL.Point(this.data[i].longitude,this.data[i].latitude);
                var myIcon = new BMapGL.Icon(this.data[i].icon, new BMapGL.Size(34, 34));
                var marker = new BMapGL.Marker(new BMapGL.Point(this.data[i].longitude,this.data[i].latitude), {icon: myIcon});
                var content = this.data[i].info;
                map.addOverlay(marker);
                this.addClickHandler(content,marker);
            }
            //让所有点在视野范围内
            //map.setViewport(pointArray);
        },
        addClickHandler(content,marker){
            var map = this.skyMap
            var that = this
            marker.addEventListener("click",function(e){
                //map.centerAndZoom(new BMapGL.Point(marker.latLng.lng,marker.latLng.lat), 16);
                that.openInfo(content,e);

            });

        },
        openInfo(content,e){
            var map = this.skyMap
            var opts = {
                width : 300,     // 信息窗口宽度
                //height: 100,     // 信息窗口高度
                //title : "信息窗口" , // 信息窗口标题
            };
            var p = e.target;
            var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMapGL.InfoWindow(content,opts);  // 创建信息窗口对象

            $(".BMap_bubble_pop").css("background-color","rgba(0,0,0,0)")
            $(".BMap_bubble_pop").css("border","0")
            $(".BMap_bubble_pop img").attr("src","https://fileimg.makalu.cc/WEB_3578CFDB64B74818851FE993E99B2274.png")
            map.openInfoWindow(infoWindow,point); //开启信息窗口

            // infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮
            //     $('.BMap_pop>img').hide();
            // })
        },
        setMapStyle(){
            var map = this.skyMap
            //百度地图背景色
            var styleJson=[
                {
                    "featureType": "land",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#00092aff"
                    }
                }, {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#033a58ff"
                    }
                }, {
                    "featureType": "green",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#0e1b30ff"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "geometry.topfill",
                    "stylers": {
                        "color": "#113549ff"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "geometry.sidefill",
                    "stylers": {
                        "color": "#143e56ff"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#dadada00"
                    }
                }, {
                    "featureType": "subwaystation",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#113549B2"
                    }
                }, {
                    "featureType": "education",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "medical",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "scenicspots",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "weight": "4"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#fed66900"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "weight": "2"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffeebb00"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "weight": "1"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#979c9aff"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffffff"
                    }
                }, {
                    "featureType": "railway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "weight": "1"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#d8d8d8ff"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#979c9aff"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffffff"
                    }
                }, {
                    "featureType": "continent",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "continent",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "continent",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "continent",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "city",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "city",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "city",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "town",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "town",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "town",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#91aeb9ff"
                    }
                }, {
                    "featureType": "town",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "road",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "poilabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "districtlabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "road",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "district",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "poilabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "poilabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "poilabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "manmade",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "entertainment",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "shopping",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "nationalway",
                    "stylers": {
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "stylers": {
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "stylers": {
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "stylers": {
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "stylers": {
                        "level": "10",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "10",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "10",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-10"
                    }
                }, {
                    "featureType": "cityhighway",
                    "stylers": {
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "stylers": {
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "stylers": {
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "stylers": {
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "6",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "7",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "8",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off",
                        "level": "9",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "6-9"
                    }
                }, {
                    "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",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "provincialwaysign",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "nationalwaysign",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "nationalwaysign",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "highwaysign",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "highwaysign",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "village",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "district",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": "20"
                    }
                }, {
                    "featureType": "district",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "district",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "country",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#ffffffff"
                    }
                }, {
                    "featureType": "country",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "water",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "tertiaryway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "tertiaryway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff10"
                    }
                }, {
                    "featureType": "provincialway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "provincialway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": "20"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "nationalway",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": "20"
                    }
                }, {
                    "featureType": "provincialway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "provincialway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "provincialway",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": "20"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": "20"
                    }
                }, {
                    "featureType": "cityhighway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "estate",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "tertiaryway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "tertiaryway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "fourlevelway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "fourlevelway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "scenicspotsway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "scenicspotsway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "universityway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "universityway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "vacationway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "vacationway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "fourlevelway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "fourlevelway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#12223dff"
                    }
                }, {
                    "featureType": "fourlevelway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "transportationlabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "transportationlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "transportationlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "transportationlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "educationlabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "educationlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "educationlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "educationlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "transportation",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#113549ff"
                    }
                }, {
                    "featureType": "airportlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "airportlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "scenicspotslabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "scenicspotslabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "medicallabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "medicallabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "medicallabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "scenicspotslabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "airportlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "entertainmentlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "entertainmentlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "entertainmentlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "estatelabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "estatelabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "estatelabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "businesstowerlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "businesstowerlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "businesstowerlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "companylabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "companylabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "companylabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "governmentlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "governmentlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "governmentlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "restaurantlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "restaurantlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "restaurantlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "hotellabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "hotellabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "hotellabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "shoppinglabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "shoppinglabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "shoppinglabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "lifeservicelabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "lifeservicelabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "lifeservicelabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "carservicelabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "carservicelabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "carservicelabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "financelabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "financelabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "financelabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "otherlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "otherlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "otherlabel",
                    "elementType": "labels.icon",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "manmade",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "manmade",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "transportation",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "transportation",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "education",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "education",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "medical",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "medical",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "scenicspots",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#2dc4bbff"
                    }
                }, {
                    "featureType": "scenicspots",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "country",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "on"
                    }
                }, {
                    "featureType": "districtlabel",
                    "elementType": "labels.text.fill",
                    "stylers": {
                        "color": "#00ebcaff"
                    }
                }, {
                    "featureType": "districtlabel",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                        "color": "#ffffff00"
                    }
                }, {
                    "featureType": "districtlabel",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": 25
                    }
                }, {
                    "featureType": "country",
                    "elementType": "labels.text",
                    "stylers": {
                        "fontsize": 30
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "5"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "6"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "7"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "8"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "9"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "10"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "11"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "12"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "13"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "14"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "15"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "16"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "17"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "18"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "19"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "20"
                    }
                }, {
                    "featureType": "boundary",
                    "stylers": {
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "21"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "5"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "6"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "7"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "8"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "9"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "10"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "11"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "12"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "13"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "14"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "15"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "16"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "17"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "18"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "19"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "20"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "on",
                        "curZoomRegionId": "0",
                        "curZoomRegion": "5,21",
                        "level": "21"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "3"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "4"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "5"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "6"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "7"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "8"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "9"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "10"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "11"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "12"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "13"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "14"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "15"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "16"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "17"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "18"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "19"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "20"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off",
                        "curZoomRegionId": "1",
                        "curZoomRegion": "3,21",
                        "level": "21"
                    }
                }]

            map.setMapStyleV2({styleJson:styleJson});
        }
    },
    watch:{
        data:function () {
            this.init()
        }
    }

})