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

我在尝试设计谷歌地图时遇到了一个非常奇怪的问题

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

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

而

这个.jsonData

是一个很长的JSON文件。我正在导入一个本地JSON文件，并尝试将其注入新的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"
                    }
                ]
            }
        ]

---

您的代码将检测不到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"});
    });
}

---

您的代码将检测不到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文件内容。现在，如果我把这些内容直接放在

新的google.maps.StyledMapType（）

中，它就会正常工作；但是，当我使用

this.http.get

调用它时，它不会加载！我懂了。检查开发工具中的网络选项卡。JSON文件路径可能错误。@WannaStream I面临同样的问题，它表明文件加载正常，但样式不会应用于映射，除非它在本地可用（即在同一文件上）。好的，“styledMapType”是否已更新？还是你想要别的？如果您想在加载文件后更新样式，请发布模板代码。我可以看到如何更新您的视图。我刚刚更新了我的帖子，所以现在它包含了JSON文件内容。现在，如果我把这些内容直接放在

新的google.maps.StyledMapType（）

中，它就会正常工作；但是，当我使用

this.http.get

调用它时，它不会加载！我懂了。检查开发工具中的网络选项卡。JSON文件路径可能错误。@WannaStream I面临同样的问题，它表明文件加载良好，但除非在本地可用（即在同一文件上），否则样式不会应用于映射