google-map-react 中的离线地图答案

【问题标题】：Offline map in google-map-reactgoogle-map-react 中的离线地图
【发布时间】：2017-05-02 10:45:56
【问题描述】：

我使用 google-map-react，我想从 localhost 加载图像，但我遇到了一些问题。这是我的代码：

         <GoogleMapReact
            onGoogleApiLoaded={({map, maps}) =>
                map.mapTypes.set("roadmap", new maps.ImageMapType({
                    getTileUrl: function (coord, zoom) {
                        return "http://192.168.1.103/google/" + zoom + "/" +  coord.x + "/" + coord.y + ".png"
                    },
                    tileSize:new maps.Size(256,256),
                    name:"GoogleRoadMaps",
                    maxZoom:18
                }))
            }
            yesIWantToUseGoogleMapApiInternals
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}>
            {
                this.state.childrenm
            }
        </GoogleMapReact>

但它不起作用。有什么问题？

【问题讨论】：

标签： google-maps reactjs debugging

【解决方案1】：

有几个可能的原因：

192.168.1.103 是您的局域网 (LAN) IP 地址，这意味着它只有在客户端的 WIFI 连接到与服务器相同的 WIFI 并且机器配置为允许连接80 端口。
如果网站是安全的，则需要设置内容安全策略 (CSP) 以升级 http connection to https
如果硬编码的 URL 不起作用，则 zoom 可能配置不正确

【讨论】：

这是内容安全策略问题...谢谢！