“jspopularGL

发布时间:2026-02-07 22:26

前序流程和样式ID调用地图样式流程一致,进入我的地图,创建一个地图样式,进入编辑器编辑完成后,直接通过编辑器中的“下载JSON”功能获取JSON代码:

img%2Fgexinghua%2FJSON1.png

将上一步中获取的样式JSON作为setMapStyleV2方法的参数。

相关代码如下:

var styleJson = [         {     "featureType": "land",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#091220ff"     } }, {     "featureType": "water",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#113549ff"     } }, {     "featureType": "green",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#0e1b30ff"     } }, {     "featureType": "building",     "elementType": "geometry",     "stylers": {         "visibility": "on"     } }, {     "featureType": "building",     "elementType": "geometry.fill",     "stylers": {         "color": "#ffffffb3"     } }, {     "featureType": "building",     "elementType": "geometry.stroke",     "stylers": {         "color": "#dadadab3"     } }, {     "featureType": "subwaystation",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#b15454B2"     } }, {     "featureType": "education",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#e4f1f1ff"     } }, {     "featureType": "medical",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#f0dedeff"     } }, {     "featureType": "scenicspots",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "color": "#e2efe5ff"     } }, {     "featureType": "highway",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "weight": 4     } }, {     "featureType": "highway",     "elementType": "geometry.fill",     "stylers": {         "color": "#f7c54dff"     } }, {     "featureType": "highway",     "elementType": "geometry.stroke",     "stylers": {         "color": "#fed669ff"     } }, {     "featureType": "highway",     "elementType": "labels",     "stylers": {         "visibility": "on"     } }, {     "featureType": "highway",     "elementType": "labels.text.fill",     "stylers": {         "color": "#8f5a33ff"     } }, {     "featureType": "highway",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "highway",     "elementType": "labels.icon",     "stylers": {         "visibility": "on"     } }, {     "featureType": "arterial",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "weight": 2     } }, {     "featureType": "arterial",     "elementType": "geometry.fill",     "stylers": {         "color": "#d8d8d8ff"     } }, {     "featureType": "arterial",     "elementType": "geometry.stroke",     "stylers": {         "color": "#ffeebbff"     } }, {     "featureType": "arterial",     "elementType": "labels",     "stylers": {         "visibility": "on"     } }, {     "featureType": "arterial",     "elementType": "labels.text.fill",     "stylers": {         "color": "#525355ff"     } }, {     "featureType": "arterial",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "local",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "weight": 1     } }, {     "featureType": "local",     "elementType": "geometry.fill",     "stylers": {         "color": "#d8d8d8ff"     } }, {     "featureType": "local",     "elementType": "geometry.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "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": "on",         "weight": 1     } }, {     "featureType": "railway",     "elementType": "geometry.fill",     "stylers": {         "color": "#123c52ff"     } }, {     "featureType": "railway",     "elementType": "geometry.stroke",     "stylers": {         "color": "#12223dff"     } }, {     "featureType": "subway",     "elementType": "geometry",     "stylers": {         "visibility": "on",         "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": "#333333ff"     } }, {     "featureType": "continent",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "city",     "elementType": "labels.icon",     "stylers": {         "visibility": "on"     } }, {     "featureType": "city",     "elementType": "labels",     "stylers": {         "visibility": "on"     } }, {     "featureType": "city",     "elementType": "labels.text.fill",     "stylers": {         "color": "#454d50ff"     } }, {     "featureType": "city",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "town",     "elementType": "labels.icon",     "stylers": {         "visibility": "on"     } }, {     "featureType": "town",     "elementType": "labels",     "stylers": {         "visibility": "on"     } }, {     "featureType": "town",     "elementType": "labels.text.fill",     "stylers": {         "color": "#454d50ff"     } }, {     "featureType": "town",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "road",     "elementType": "geometry.fill",     "stylers": {         "color": "#12223dff"     } }, {     "featureType": "poilabel",     "elementType": "labels",     "stylers": {         "visibility": "on"     } }, {     "featureType": "districtlabel",     "elementType": "labels",     "stylers": {         "visibility": "off"     } }, {     "featureType": "road",     "elementType": "geometry",     "stylers": {         "visibility": "on"     } }, {     "featureType": "road",     "elementType": "labels",     "stylers": {         "visibility": "off"     } }, {     "featureType": "road",     "elementType": "geometry.stroke",     "stylers": {         "color": "#ffffff00"     } }, {     "featureType": "district",     "elementType": "labels",     "stylers": {         "visibility": "off"     } }, {     "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": "districtlabel",     "elementType": "labels.text.stroke",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "entertainment",     "elementType": "geometry",     "stylers": {         "color": "#ffffffff"     } }, {     "featureType": "shopping",     "elementType": "geometry",     "stylers": {         "color": "#12223dff"     } } ]; map.setMapStyleV2({styleJson:styleJson});

设置后地图效果如下:

yanmou.png

网址:“jspopularGL https://mxgxt.com/news/view/1991835

随便看看