将自定义地图样式添加到 jQuery 商店定位器插件

Question

我正在为使用 jQuery Store Locator 插件 (https://github.com/bjorn2404/jQuery-Store-Locator-Plugin) 的客户端站点开发商店定位器。

我正在尝试合并一些自定义地图样式：

stylers: [
    { 'saturation': '-62' },
    { 'gamma': '0.5' }
  ]

我以为我可以将它们放入 mapSettings 参数中，但它们没有被识别。我已经尝试了所有我能想到的括号变体，但无济于事。

我现在在想，我需要进入 jquery.storelocator.js，并将其添加到那里，但我无法找到放置它的位置（如果这甚至是最好的解决方案）。

有什么想法吗？

更新 这是我尝试实现的代码：

<script>
$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, stylers : [{'saturation' :'-62'}] }
    });
});
</script>

Answer 1

您可以创建一个数组，例如包含地图样式的 gmapStyles 并在 mapSettings 对象中调用它。 查看下面函数中的 gmapStyles 数组。 我的地图看起来像这样http://voddemo.akkastech.com/category/2

<script>
    function newStoreLocatorInit(element= jQuery('#bh-sl-map-container'), type, ls){
        if(element.length > 0){
            var gmapStyles = [
                {"elementType": "labels","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative","elementType": "geometry","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative.land_parcel","stylers": [{"visibility": "off"}]},
                {"featureType": "administrative.land_parcel", "elementType": "geometry", "stylers": [{"color": "#ee99e6"}]},
                {"featureType": "administrative.neighborhood","stylers": [{"visibility": "off"}]},
                {"featureType": "landscape.man_made","elementType": "geometry","stylers": [{"color": "#dfe4e6"}]},
                {"featureType": "poi","stylers": [{"visibility": "off"} ] },
                {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#a0ec96"}]},
                {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#bdc3cb"}]},
                {"featureType": "road", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]},
                {"featureType": "transit", "stylers": [{"visibility": "off"}]}
            ];
            element.storeLocator({
                callbackSuccess         : function(){
                    jQuery('.at-dataloader').fadeOut(300);
                    jQuery('.bh-sl-loc-list .list').fadeIn(300);
                },
                'infowindowTemplatePath'     : '/assets/js/plugins/storeLocator/templates/infowindow-description.html',
                'listTemplatePath'           : '/assets/js/plugins/storeLocator/templates/location-list-description.html',
                taxonomyFilters : {
                    'name':'name-filter',
                    'subcategoryname':'subcategoryname-filter',
                    'location':'location-filter',
                    'subcategoryid':'subcategoryid-filter'
                },
                /*distanceAlert: -1,*/
//                    querystringParams : true,
//                    fullMapStart:true,
                disableAlphaMarkers         : true,
                dataType                    : 'json',
                slideMap                    : false,
                defaultLoc                  : true,
                defaultLat                  : '44.9207462',
                defaultLng                  : '-93.3935366',
                visibleMarkersList          : false,
                listColor1                  : '',
                listColor2                  : '',
                /*maxDistance                 : false,*/
                markerCluster               : type != "true" ? {
                    zoomOnClick             : true,
                    styles                  : [{
                        width               : 40,
                        height              : 40,
                        textSize            : 14,
                        anchor              : [60, 42],
                        textColor           : '#fff',
                        backgroundSize      : 'cover',
                        backgroundPosition  : 'top, center',
                        cssClass            : 'at-iconcluster',
                        url                 : '/images/svg/iconcluster.svg',
                    }]
                } : null,
                mapSettings                 : {
                    zoom                    : 11,
                    disableDefaultUI        : true,
                    zoomControl             : true,
                    styles                  : gmapStyles,
                    mapTypeId               : google.maps.MapTypeId.ROADMAP,
//                        minZoom                    : 10,
//                        maxZoom                    : 12,
                },
                dataLocation                : ls ,
                // dataLocation             : '/data/locations.json' ,
                markerImg                   : '/images/svg/icon01.svg',
                markerDim                   : {
                    width: 36,
                    height: 45
                },
                selectedMarkerImg           : '/images/svg/icon02.svg',
                selectedMarkerImgDim        : {
                    width: 36,
                    height: 45
                },
                infoBubble: {
                    backgroundColor         : '#fff',
                    borderRadius            : 0,
                    borderWidth             : 0,
                    closeSrc                : '/assets/img/close-icon-dark.png',
                    disableAutoPan          : false,
                    shadowStyle             : 0,
                    padding                 : 0,
                    minWidth                : 370,
                    maxHeight               : 162,
                    backgroundClassName     : 'bh-sl-window',
                },
                callbackMapSet              : function(){

                },
                callbackMarkerClick     : function(){
                    setTimeout(function(){
                        ajaxCallsOnPopupNavBtnClick()
                        jQuery(".at-btnthemecontent").animatedModal({
                            color: 'rgba(222, 226, 228, 0.85)',
                            modalTarget:'at-themecontent',
                            animatedOut:'zoomOut',
                            animatedIn:'zoomIn',
                        });
                        jQuery('.at-btnthemecontent').on('click', function(){
                            jQuery('.at-mlogo').addClass('at-hideui');
                            jQuery('.at-sidebar').addClass('at-hideui');
                            jQuery('.at-toprightbox').addClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').addClass('at-hideui');
                            jQuery('.at-btnfindoutmore').addClass('at-hideui');
                        });
                        jQuery('.close-at-themecontent.at-btnclose').on('click', function(){
                            jQuery('.at-mlogo').removeClass('at-hideui');
                            jQuery('.at-sidebar').removeClass('at-hideui');
                            jQuery('.at-toprightbox').removeClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').removeClass('at-hideui');
                            jQuery('.at-btnfindoutmore').removeClass('at-hideui');
                        });
                    }, 1000)
                },
                callbackListClick       : function(){
                    setTimeout(function(){
                        ajaxCallsOnPopupNavBtnClick()
                        jQuery(".at-btnthemecontent").animatedModal({
                            color: 'rgba(222, 226, 228, 0.85)',
                            modalTarget:'at-themecontent',
                            animatedOut:'zoomOut',
                            animatedIn:'zoomIn',
                        });
                        jQuery('.at-btnthemecontent').on('click', function(){
                            jQuery('.at-mlogo').addClass('at-hideui');
                            jQuery('.at-sidebar').addClass('at-hideui');
                            jQuery('.at-toprightbox').addClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').addClass('at-hideui');
                            jQuery('.at-btnfindoutmore').addClass('at-hideui');
                        });
                        jQuery('.close-at-themecontent.at-btnclose').on('click', function(){
                            jQuery('.at-mlogo').removeClass('at-hideui');
                            jQuery('.at-sidebar').removeClass('at-hideui');
                            jQuery('.at-toprightbox').removeClass('at-hideui');
                            jQuery('.gmnoprint.gm-bundled-control').removeClass('at-hideui');
                            jQuery('.at-btnfindoutmore').removeClass('at-hideui');
                        });
                    }, 1000)
                },
                callbackNoResults : function(){
                    alert('No locations were found with the given criteria. Please modify your selections or input.')
                },
                callbackFilters : function(){

                }

            });
        }
    }

Answer 2

毕竟，答案是语法问题。 mapSettings 属性被传递给 MapOptions 类，并且需要样式 和 样式参数：

'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [{stylers: [{'saturation' :'-62'}]}] }

在样式括号内，您可以添加任意数量的自定义设置，只要您也使用 stylers 参数即可：

'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [
            {
                "featureType": "landscape",
                "stylers": [
                  { "saturation": -74 },
                  { "lightness": 82 },
                  { "gamma": 1.18 },
                  { "color": "#eleff2" }
                ]
            },{
                "featureType": "water",
                "stylers": [
                  { "saturation": -49 },
                  { "color": "#eleff2" },
                  { "lightness": -1 },
                  { "gamma": 1 }
                ]
            },{
                "featureType": "road",
                "stylers": [
                  { "hue": "#0099ff" },
                  { "lightness": 4 },
                  { "saturation": -78 }
                ]
            },{
                "featureType": "poi",
                "stylers": [
                  { "hue": "#0099ff" },
                  { "saturation": -38 },
                  { "lightness": 67 }
                ]
              }
            ] }

Answer 3

用于设置地图样式的MapOption 是styles，而不是stylers。变化：

$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, stylers : [{'saturation' :'-62'}] }
    });
});

收件人：

$(function() {
    $('#map-container').storeLocator({
        'dataType': 'json',
        'dataLocation': '/data/locations.php',
        'slideMap' : true,
        'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [{stylers : [{'saturation' :'-62'}]}] }
    });
});