JavaScript/Angular - 尝试使用本地 JSON 文件设置 Google 地图样式时出现问题答案

【问题标题】：JavaScript/Angular - Issue while trying to style Google Maps using a local JSON fileJavaScript/Angular - 尝试使用本地 JSON 文件设置 Google 地图样式时出现问题
【发布时间】：2017-05-12 23:55:32
【问题描述】：

我在尝试设置 Google 地图样式时遇到了一个非常奇怪的问题。

通常要为 Google 地图设置样式，请执行以下操作：

var styledMapType = new google.maps.StyledMapType(this.jsonData,{name: "Styled Map"});

而 this.jsonData 是一个长 JSON 文件。我正在导入一个本地 JSON 文件并尝试将其注入 new google.maps.StyledMapType 对象；但是，没有任何改变！另一方面，当我将同一个本地 JSON 文件的内容分配给一个变量时，它会起作用并改变地图的样式。但是，我不想将那个长 JSON 数组保留在我的控制器的同一页面上。

我正在使用以下导入本地 JSON 文件：

mapStyleFile(){
     this.http.get("assets/json/mapStyle.json")
     .map((res) => res)
     .subscribe(data =>{
      this.jsonData = data["_body"];
    });
  }

模板 JSON：

        [
            {
                "featureType": "all",
                "elementType": "all",
                "stylers": [
                    {
                        "hue": "#e7ecf0"
                    }
                ]
            },
            {
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#636c81"
                    }
                ]
            },
            {
                "featureType": "administrative.neighborhood",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#636c81"
                    }
                ]
            },
            {
                "featureType": "administrative.land_parcel",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#ff0000"
                    }
                ]
            },
            {
                "featureType": "landscape",
                "elementType": "geometry.fill",
                "stylers": [
                    {
                        "color": "#f1f4f6"
                    }
                ]
            },
            {
                "featureType": "landscape",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#496271"
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "all",
                "stylers": [
                    {
                        "saturation": -70
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "geometry.fill",
                "stylers": [
                    {
                        "color": "#ffffff"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "geometry.stroke",
                "stylers": [
                    {
                        "color": "#c6d3dc"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [
                    {
                        "color": "#898e9b"
                    }
                ]
            },
            {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "saturation": -60
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                    {
                        "color": "#d3eaf8"
                    }
                ]
            }
        ]

【问题讨论】：

标签： javascript google-maps angular google-maps-api-3

【解决方案1】：

您的代码不会检测到 this.jsonData 的变化。加载 JSON 后，您必须更新样式。

mapStyleFile(){
     this.http.get("assets/json/mapStyle.json")
     .map((res) => res)
     .subscribe(data => {
      this.jsonData = data["_body"];
      let styledMapType = new google.maps.StyledMapType(this.jsonData,{name: "Styled Map"});
    });
}

【讨论】：

好的，'styledMapType' 更新了吗？或者你想要别的东西？如果您希望在加载文件后更新样式，请发布您的模板代码。我可以看到如何更新您的视图。
我刚刚更新了我的帖子，所以现在它包含 JSON 文件内容。现在，如果我获取该内容并将其直接放在new google.maps.StyledMapType() 中，它会按预期工作；但是，当我使用 this.http.get 调用它时，它不会加载！
我明白了。检查开发工具中的网络选项卡。 JSON 文件路径可能有误。
@wannadream 我遇到了同样的问题，它表明文件加载正常，但是除非在本地可用，否则样式不会应用于地图（即在同一个文件上）跨度>