谷歌地图样式器

Question

由于某种原因，当我试图添加样式器来自定义我的谷歌地图的颜色时，这段代码中断了，有人能指出我在正确的方向吗?我做错了什么?

function initialize() {
var centerMap = new google.maps.LatLng(52.204872,0.120163);
var myOptions = {
    zoom: 12,
    center: centerMap,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    var style= [
      {
        "stylers": [
          { "saturation": 100 },
          { "lightness": 31 },
          { "hue": "#ff6600" },
          { "gamma": 0.9 }
        ]
      },{
      },{
      }
    ]
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
 ['The Frontroom', 52.202977,0.138938, 1, 'The Frontroom.'],
['Fitzwilliam Museum',52.199678,0.119931, 2, 'Fitzwilliam Museum'],
['Wysing Arts centre', 52.182077,-0.06977, 3, 'Wysing Arts Centre'],
['Cambridge School of Art', 52.203825,0.134808, 4, 'Cambridge School of Art'],
['Kettles yard', 52.210851,0.114637, 5, 'Kettles Yard'],
['Changing Spaces',52.199678,0.119931, 6, 'Changing Spaces'],
 ['Aid & Abet', 52.195218,0.136578, 7, 'Aid & Abet'],
['The Junction', 52.190756,0.136522, 8, 'The Junction']
];

function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4]
    });
    var contentString = "Some content";
    google.maps.event.addListener(marker, "click", function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });
}
}

Answer 1

你的myOptions的格式应该如下所示(参见原单词"style"后面的部分:

var myOptions = {
    zoom: 12,
    center: centerMap,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
      {
        "stylers": [
          { "saturation": 100 },
          { "lightness": 31 },
          { "hue": "#ff6600" },
          { "gamma": 0.9 }
        ]
      },{
      },{
      }
    ]
}

我也移动了一些东西。这是一个工作的JSFiddle: http://jsfiddle.net/VX8TJ/

Answer 2

你有一个问题在myOptions数组(var之前的风格)，这是你需要的:

var myOptions = {
    zoom: 12,
    center: centerMap,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    [
      {
        "stylers": [
          { "saturation": 100 },
          { "lightness": 31 },
          { "hue": "#ff6600" },
          { "gamma": 0.9 }
        ]
      },{
      },{
      }
    ]
};

Answer 3

我设法在最后修复了我自己，我的正确代码与样式:

function initialize() {
var styles =   [
  {
    stylers: [
      { hue: '#F2846A' },
      { saturation: 80 }
    ]
  },{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { lightness: 100 },
      { visibility: 'simplified' }
    ]
  },{
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { visibility: 'off' }
    ]
  }
];
var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['The Frontroom', 52.202977,0.138938, 1, 'The Frontroom.'],
];

function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4]
    });
    var contentString = "Some content";
    google.maps.event.addListener(marker, "click", function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });
}
}
google.maps.event.addDomListener(window, 'load', initialize);