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

Question

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

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

未捕获 InvalidValueError：不是要素或要素集合

此外，错误似乎来自一个名为 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" }
        ]
    }
]
}

知道我做错了什么吗？这是我第一次尝试制作地图。

Answer 1

您混淆了 JSON 和 style a map which is what you get out of the Map Styling Wizard and the GeoJSON used by the data layer

他们去不同的地方，做不同的事情。要设置地图样式，请将 "style" 数据放入 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>

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


        ]
})

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

Using JSON files in Google Maps styling

javascript

json

google-maps