-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 は次のようにフォーマットする必要があります (元の単語「スタイル」の後のセクションを参照してください。

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配列（varbeforeスタイル）に問題があります。必要なものは次のとおりです。

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 に答える