反应谷歌地图节点模块映射样式加载空对象，而不是JSON

react google maps node module map style loads empty object, not json

本文关键字：对象 JSON 加载 谷歌地图 节点 模块 样式 映射      更新时间：2023-09-26

我正在尝试让 react-google-maps 节点模块加载地图样式的 json 文件。控制台日志显示它正在查找 json 文件并加载它，但我从 require（） 获得的值是一个空对象，只加载了 getter 和 setter 函数。

这样：

    var mapStyle = require('./darkMapStyle.json');
    // compiles down using webpack
    var mapStyle = __webpack_require__(428);
    mapStyle = {
    __defineGetter__: __defineGetter__()
    __defineSetter__: __defineSetter__()
    __lookupGetter__: __lookupGetter__()
    __lookupSetter__: __lookupSetter__()
    constructor: Object()
    hasOwnProperty: hasOwnProperty()
    isPrototypeOf: isPrototypeOf()
    propertyIsEnumerable: propertyIsEnumerable()
    toLocaleString: toLocaleString()
    toString: toString()
    valueOf: valueOf()
    get __proto__: get __proto__()
    set __proto__: set __proto__()
    }
    // load my google map in the render()
    <GoogleMapLoader    
        loadingElement={<div>loading</div>}
        containerElement={
            <div {...this.props} style={{height: "100%",}}/>
        }
        googleMapElement={
           <GoogleMap
               defaultZoom={results.mapZoom}
               defaultCenter={{lat: 37.400343, lng: -122.110043}}
               defaultOptions={{styles: mapStyle}}
               onClick={this.handleMapClick}>         
           </GoogleMap>
         }
     />

我使用 require 导入的所有其他模块都按预期运行，但 mapStyle 没有提供我在 json 文件中拥有的 json 数据。

我按照这个例子来做到这一点：http://tomchentw.github.io/react-google-maps/#/basics/styled-map?_k=nd5q0e

感谢任何帮助

如果有人遇到类似的情况，我已经发现了这个问题的有效解决方案。

我在一个单独的文件中创建了一个函数，其中包含 json，它只是作为对象（而不是 json 字符串）返回。

我断言这返回了 json 到我的渲染（） 中的一个变量

var mapStyle = getData.getDarkMapStyle();

然后我把这个变量分配给我的谷歌地图标签，如下所示：

<GoogleMap
     defaultOptions={{styles: mapStyle}}>
</GoogleMap>

只是没有通过require（）检索json对象，但函数调用解决了这个问题。

相关文章：