Javascript 在谷歌地图样式中使用JSON文件

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

好的，我有我的地图，它可以很好地加载，但是我试图将我的JSON文件添加到自定义样式中，我得到了一个错误

未捕获的InvalidValueError:不是功能或功能集合

此外，错误似乎来自一个名为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和使用的GeoJSON

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

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

使用地图样式处理代码段（如果要从外部文件加载它们，可以，但不使用数据层，只需将样式数据指定给全局变量并将其用于“样式”属性）：

var映射；
函数初始化（）{
//创建一个简单的地图。
map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：16，
中心：{
拉脱维亚：53.668398，
液化天然气：-2.167713
},
风格：[{
“特色类型”：“景观”，
“elementType”：“geometry.fill”，
“造型师”：[{
“颜色”：“#ffffff”
}]
}, {
“featureType”：“poi”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“#efefef”
}]
}, {
“功能类型”：“水”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“道路”，
“elementType”：“geometry.stroke”，
“造型师”：[{
“可见性”：“打开”
}, {
“颜色”：“deddd”
}]
}, {
“功能类型”：“道路”，
“elementType”：“geometry.fill”，
“造型师”：[{
“可见性”：“打开”
}, {
“颜色”：“#efefef”
}]
}, {
“featureType”：“poi”，
“elementType”：“labels.icon”，
“造型师”：[{
“可见性”：“打开”
}]
}]
});
//从与演示相同的服务器加载GeoJSON。
//map.data.loadGeoJson（'http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
}
您需要这样做：

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


        ]
})

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


        ]
})