-1

由于某种原因，当我尝试添加样式器以自定义 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);
    });
}
}
4

3 回答 3

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/

于 2013-03-01T17:08:07.453 回答
0

您在 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 }
        ]
      },{
      },{
      }
    ]
};
于 2013-03-01T17:04:49.753 回答
0

我最终设法修复了自己，我的正确代码与样式：

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);
于 2013-03-01T17:07:16.377 回答