在 Google 地图样式中使用 JSON 文件答案

【问题标题】：Using JSON files in Google Maps styling在 Google 地图样式中使用 JSON 文件
【发布时间】：2023-04-01 17:34:01
【问题描述】：

我对这个 Google 地图自定义样式向导有点做噩梦。

好的，我有我的地图，它可以正常加载，但我正在尝试将我的 JSON 文件添加到自定义样式中，但我收到了一个错误。

未捕获的 InvalidValueError：不是 Feature 或 FeatureCollection

此外，错误似乎来自名为 main.js 的文件 - 但我有一个名为 main.js 的文件，其中没有此代码。

这是我文档head中的代码。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713}
});

// Load a GeoJSON from the same server as our demo.
map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}

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

</script>

我的 JSON 代码：

{
"type": "FeatureCollection",
"features": [
    {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
            { "color": "#ffffff" }
        ]
    },{
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            { "color": "#efefef" }
        ]
    },{
        "featureType": "water",
        "stylers": [
            { "visibility": "off" }
        ]
    },{
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            { "visibility": "on" },
            { "color": "#dedddd" }
        ]
    },{
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [
            { "visibility": "on" },
            { "color": "#efefef" }
        ]
    },{
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [
            { "visibility": "on" }
        ]
    }
]
}

有什么想法我在这里做错了吗？这是我第一次做地图。

【问题讨论】：

标签： javascript json google-maps

【解决方案1】：

您将 JSON 与 style a map 混淆了，这是您从 Map Styling Wizard 和 data layer 使用的 GeoJSON 中得到的结果

他们去不同的地方，做不同的事情。要设置地图样式，请将“样式”数据放入 MapOptions 样式属性中。

数据层用于在地图上显示地理信息（标记、多边形、折线等），而不是设置地图图块的样式。

工作代码 sn-p 与您的地图样式（如果您想从外部文件加载它们，您可以，但您不会使用数据层，您只需将样式数据分配给全局变量并使用对于样式属性）：

var map;

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 16,
    center: {
      lat: 53.668398,
      lng: -2.167713
    },
    styles: [{
      "featureType": "landscape",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "color": "#efefef"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry.stroke",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#dedddd"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#efefef"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "on"
      }]
    }]
  });

  // Load a GeoJSON from the same server as our demo.
  //map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

【讨论】：

【解决方案2】：

你需要这样的东西：

map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713},
styles: [
        {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
            { "color": "#ffffff" }
          ]
          },{
              "featureType": "poi",
              "elementType": "geometry",
              "stylers": [
                  { "color": "#efefef" }
              ]
          },{
              "featureType": "water",
              "stylers": [
                  { "visibility": "off" }
              ]
          },{
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": [
                  { "visibility": "on" },
                  { "color": "#dedddd" }
              ]
          },{
              "featureType": "road",
              "elementType": "geometry.fill",
              "stylers": [
                  { "visibility": "on" },
                  { "color": "#efefef" }
              ]
          },{
              "featureType": "poi",
              "elementType": "labels.icon",
              "stylers": [
                  { "visibility": "on" }
              ]
          }


        ]
})

【讨论】：