javascript - 风格化的谷歌地图

Question

我能够完美地设置地图的样式，使其不饱和。我还可以设置地图样式，使其具有自定义标记。但是我不能结合代码来制作一个带有自定义标记的去饱和地图。有人可以看看我的脚本并检查我在正确的位置是否有正确的位。感谢您的帮助 - 非常感谢：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>
var map;
var brooklyn = new google.maps.LatLng(53.798709, -1.550740); 

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(53.798709, -1.550740),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);

var image = 'images/marker.png';
var myLatLng = new google.maps.LatLng(53.798709, -1.550740);
var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});

var featureOpts = [
{
  stylers: [

    ]
},{
        featureType: "all",

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

   {

    }]

    }

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Answer 1

您忘记应用样式。

将此行放在末尾initialize()：

map.setOptions({styles:featureOpts});

或使用以下方式定义样式mapOptions：

var mapOptions = {
  zoom:       14,
  center:     new google.maps.LatLng(53.798709, -1.550740),
  mapTypeId:  google.maps.MapTypeId.ROADMAP,
  styles:     [
                {
                  featureType: "all",
                  stylers: [
                            {
                              saturation: -100
                            }
                           ]
                }
              ]
};