Question

我正在使用Google地图[v3]为项目提供的API。地图风格很大，我无法弄清楚如何将我的脚本的样式部分放在外部JavaScript文件中并在我的函数中调用它。

map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat:40, lng: -97.7313421},
zoom: 3,
clickable: true,
styles: [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#212121"
            }
          ]
        }, ....

为了清楚起见，我只希望数组的样式部分位于其他地方。

Answer 1

Plunkr code put together.

将原始样式数组放入单个文件（此处为styles.js）并使用jQuery GET将该文件包含在您的Google地图样式中。

...
function initMap() {
    var mapStyle = '';

    $.get( 'styles.js', function( data ) {
      if (data) {
        mapStyle = JSON.parse(data);
        map_options = {
          zoom: 10,
          center: {lat: 42.9456, lng: -122.2},
          styles: mapStyle
        }

        map_document = document.getElementById('map')
        map = new google.maps.Map(map_document,map_options);
        loadMarkers()
      }
    });
}

google.maps.event.addDomListener(window, 'load', initMap);

styles.js文件包含与您正常编写的样式完全相同的样式：

[
    {
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#212121"
            }
        ]
    },
 ...
 ]

Google Map API v3，将地图样式移到单独的文件中

1 个答案: