Question

我对这款Google地图自定义样式向导感到有点噩梦。

好的，我有我的地图，它加载正常，但我试图将我的JSON文件添加到自定义样式的东西，我得到一个错误。

未捕获的InvalidValueError：不是功能或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" }
        ]
    }
]
}

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

Answer 1

您将JSON混淆为style a map，这是您从Map Styling Wizard获得的内容以及data layer

使用的GeoJSON

他们去不同的地方做不同的事情。要设置地图样式，请设置＆＃34;样式＆＃34; MapOptions样式属性中的数据。

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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 Maps样式中使用JSON文件

2 个答案: