Google Maps API - 灰度

时间:2015-02-05 13:35:52

标签: javascript jquery google-maps google-maps-api-3

我有以下代码设置来应用各种区域的地图

var locations = [
  ['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
  ['Lond office - London Office', 51.515026, -0.086811, 2],

];
function plotMap(loc) {  

var mapOptions = {
    zoom: 17,
    center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
    stylers: [
    { saturation: -100 } // <-- THIS
  ]
};

var map = new google.maps.Map(document.getElementById('map'),

  mapOptions);

var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
     mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    },
    icon: 'marketICO.png',
    title: (locations[loc][0])
});

var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', (function(marker) {
    return function() {
      infowindow.setContent(locations[loc][0]);
      infowindow.open(map, marker);
    }
  })(marker, loc));
}

$('.livLink').click(function(){
    plotMap(0);
});
$('.lonLink').click(function(){
    plotMap(1);
});
    plotMap(0);

有没有人设法让他们的地图灰度 - 我已经尝试了一些 - 包括上面的 - 但到目前为止没有运气..

1 个答案:

答案 0 :(得分:2)

您没有正确应用这些样式。

var styles = [{
    "stylers": [{
        "saturation": -100
    }]
}];

var mapOptions = {
    zoom: 17,
    styles: styles,
    // your other options here
};

或直接在地图选项中:

var mapOptions = {
    zoom: 17,
    styles: [{
        "stylers": [{
            "saturation": -100
        }]
    }],
    // your other options here
};

检查这个漂亮的工具:http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html