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

Question

这个谷歌地图自定义样式向导让我有点做噩梦。

好的，我有我的地图并且加载正常，但是我尝试将我的 JSON 文件添加到自定义样式中，但出现错误。

未捕获的 InvalidValueError: not a Feature 或 FeatureCollection

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

这是我文档头部的代码。

<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" }
        ]
    }
]
}

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

Answer 1

您将 JSON 混淆为地图样式，这是您从地图样式向导和数据层使用的 GeoJSON 中得到的

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

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

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

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>