如何使用带有 jquery-ui-map 插件的 Google Maps Stylers？答案

【问题标题】：How to use Google Maps Stylers with jquery-ui-map plugin?如何使用带有 jquery-ui-map 插件的 Google Maps Stylers？
【发布时间】：2012-04-09 10:41:40
【问题描述】：

我写js太弱了。我需要构建和自定义谷歌地图。为此，我确实使用了 jquery-ui-map 插件和这段代码：

if ($("#map_canvas").length){
$('#map_canvas').gmap().bind('init', function(ev, map) {
    $("[data-gmapping]").each(function(i,el) {
        var data = $(el).data('gmapping');
        $('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {

            $(el).click(function() {
                $(marker).triggerEvent('click');
            });
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').html() }, this);
            });
    }); 
});
}

我必须把这个生成的变量放在哪里：

{ stylers: [ { lightness: 7 }, { saturation: -100 } ] }

我使用的链接： http://code.google.com/p/jquery-ui-map/ http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

【问题讨论】：

标签： google-maps google-maps-api-3 jquery-ui-map

【解决方案1】：

有很多地方可以放置它，例如进入地图的实例化：

现在：

$('#map_canvas').gmap()  //...more code

然后：

$('#map_canvas').gmap({styles:[{stylers:[{lightness:7},{saturation:-100}]}]})  //...more code

gmap-constructor 接受google.maps.Map.setOptions() 接受的所有选项。其中一个选项是“样式”，它应该是一个带有 google.maps.MapTypeStyle 的数组（您生成的输出是 MapTypeStyle）

【讨论】：