Question

出于某种原因，当我尝试添加样式来自定义Google地图的颜色时，此代码会中断，是否有人能指出正确的方向？我做错了什么？

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);

谷歌地图样式

3 个答案: