我尝试编辑现有的地图模块样式以获取另一个地图主题而不是默认主题,但Divi似乎没有提供该功能。
上述样式的示例:
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12,
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#8754c4"
}]
}, {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
}, {
"lightness": 20
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
}, {
"lightness": -33
}, {
"weight": 2
}, {
"gamma": 0.8
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
}, {
"saturation": 30
}]
}, {
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8945c7"
}]
}, {
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
}, {
"saturation": -20
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
}, {
"saturation": -30
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
}, {
"lightness": 25
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}, {
"color": "#ff0000"
}]
}, {
"featureType": "transit",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": -20
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#7950a9"
}]
}]
我如何将这些样式应用于现有的Map模块?这个功能有外部插件吗?
https://elegantmarketplace.com/downloads/divi-map-extended-module/
这个付费模块添加了这些功能,但我想知道是否还有其他方法可以解决这个问题。
答案 0 :(得分:2)
您可以在此文件中添加自定义样式:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [ {
stylers: [
{ saturation: parseInt( this_map_grayscale ) }
]
} ]
}));
第2405行,替换为:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#8754c4"
}]
}, {
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
}, {
"lightness": 20
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
}, {
"lightness": -33
}, {
"weight": 2
}, {
"gamma": 0.8
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
}, {
"saturation": 30
}]
}, {
"featureType": "landscape",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8945c7"
}]
}, {
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
}, {
"saturation": -20
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
}, {
"saturation": -30
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
}, {
"lightness": 25
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"color": "#ffffff"
}, {
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}, {
"color": "#ff0000"
}]
}, {
"featureType": "transit",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": -20
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#7950a9"
}]
}]
}));
用这个:
let arr = [ { water: 8.12 }, { temp: 22.05 }, { humid: 60.04 } ],
[{water}, {temp}, {humid}] = arr,
obj = {water, temp, humid};
console.log(obj);
答案 1 :(得分:0)
到目前为止,它对我来说仍然很有效,现在这段代码在2499行中,看起来像这样:
$this_map_container.data('map', new google.maps.Map( $this_map[0], {
zoom: parseInt( $this_map.attr('data-zoom') ),
center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false,
draggable: is_draggable,
panControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
zoomControlOptions: {
position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP
},
styles: [ {
stylers: [
{ saturation: parseInt( this_map_grayscale ) }
]
} ]
}));
我要设置的样式是这样:
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#313131"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d900d9"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#181818"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a71089"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#600659"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#373737"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#af1498"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#f5a9ea"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#3c3c3c"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e72ecb"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#4e4e4e"
}
]
},
{
"featureType": "transit",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f5a9ea"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
]
我应该怎么做?
答案 2 :(得分:-1)