我尝试编辑现有地图模块的样式以获取另一个地图主题而不是默认主题，但是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"
}]
}]
如何将这些样式应用于现有地图模块？此功能是否有外部插件？
https://elegantmarketplace.com/downloads/divi-map-extended-module/
此付费模块添加了这些功能，但是我想知道是否还有另一种方法。
您可以在此文件中添加自定义样式：
/wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js
行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: [ {
stylers: [
{ saturation: parseInt( this_map_grayscale ) }
]
} ]
}));
与此：
$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"
}]
}]
}));
到目前为止，它对我有用，现在该代码在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"
}
]
}
]
我应该如何做？
您可以尝试使用Divi中的colormap的插件 snazzy Map ，它易于处理插件链接
您也可以访问主站点时髦地图
如果您使用此插件，则不会覆盖主题更新。谢谢