在哪里将 JSON 添加到 Google Maps Javascript 中？答案

【问题标题】：Where do I add JSON into Google Maps Javascript?在哪里将 JSON 添加到 Google Maps Javascript 中？
【发布时间】：2014-07-05 13:48:54
【问题描述】：

我有这个用于 Google 地图的脚本：

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(51.523612, -0.125816),
          zoom: 17,

        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>

还有这个 JSON：

[
  {
    "featureType": "poi",
    "stylers": [
      { "saturation": -100 },
      { "visibility": "off" }
    ]
  },{
    "stylers": [
      { "saturation": -100 }
    ]
  },{
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
  }
]

如何将它们组合起来以提供我正在寻找的风格？

我似乎找不到合适的文档。

【问题讨论】：

在我看来这个 JSON 描述了地图选项，所以它应该包含在 mapOptions 变量中。你试过这个吗？
此外，您的 mapOptions 变量正在初始化，并在其末尾（在 zoom = 17 之后）使用逗号进行初始化，除非您要在其后写一些东西。
Incorporating JSON from Google Maps API Wizard into existing html 的可能重复项

标签： javascript json google-maps

【解决方案1】：

这是一个示例from Google，向您展示如何将各种元素集成在一起。

  var styles =   [
    {
      stylers: [
        { hue: '#00ffe6' },
        { saturation: -20 }
      ]
    },{
      featureType: 'road',
      elementType: 'geometry',
      stylers: [
        { lightness: 100 },
        { visibility: 'simplified' }
      ]
    },{
      featureType: 'road',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(styles,
    {name: 'Styled Map'});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(50.9818, -114.1219),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.TERRAIN, 'styled_maps']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_maps', styledMapType);
  map.setMapTypeId('styled_maps');
}

【讨论】：