wordpress - Divi - 自定义 map 模块

Question

我尝试编辑现有 map 模块的样式以获得另一个 map 主题而不是默认主题，但 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/

这个付费模块添加了这些功能，但我想知道是否还有其他方法可以实现。

Answer 1

您可以在此文件中添加自定义样式:

/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"
                        }]
                    }]

                }));