我正在为使用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>
答案 0 :(得分：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(){
}
});
}
}
答案 1 :(得分：0)
用于设置地图样式的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'}]}] }
});
});
答案 2 :(得分：0)
毕竟答案结果是一个语法问题。 mapSettings属性传递给MapOptions类，并且需要样式和样式器参数：
'mapSettings' : { zoom : 12, mapTypeId: google.maps.MapTypeId.ROADMAP, styles : [{stylers: [{'saturation' :'-62'}]}] }
在样式括号内，您可以添加任意数量的自定义设置，只要您使用样式器参数：
'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 }
]
}
] }