Question

我想在react项目中使用react-simple-map。

我使用了github上的示例来尝试显示一个简单的地图：

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"

const wrapperStyles = {
  width: "100%",
  maxWidth: 980,
  margin: "0 auto",
}

class BasicMap extends Component {
  render() {
    return (
      <div style={wrapperStyles}>
        <ComposableMap
          projectionConfig={{
            scale: 205,
            rotation: [-11,0,0],
          }}
          width={980}
          height={551}
          style={{
            width: "100%",
            height: "auto",
          }}
          >
          <ZoomableGroup center={[0,20]} disablePanning>
            <Geographies geography="/static/world-50m.json">
              {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
                <Geography
                  key={i}
                  geography={geography}
                  projection={projection}
                  style={{
                    default: {
                      fill: "#ECEFF1",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    hover: {
                      fill: "#607D8B",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    pressed: {
                      fill: "#FF5722",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                  }}
                />
              ))}
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
      </div>
    )
  }
}

export default BasicMap

但是，我在控制台中收到错误消息“ JSON位置0中的<意外令牌<”。我保留了完全相同的文件夹。唯一的错误消息是这样。

如果您对反应中的地图有个想法，我可以根据某些条件为每个国家/地区涂上不同的颜色...

谢谢。

Answer 1

我遇到了同样的问题。如果将world-50m.json放在src文件夹中，则react无法使用get请求加载它-它尝试从http://localhost:3000/static/world-50m.json加载它。在我的情况下，它返回自定义的404 HTML页面->，这就是为什么发生错误“ JSON中位置0的意外令牌<”。

解决方案是将带地图的json移动到react公共文件夹中，然后开始工作。

React-simple-map“ JSON中位置0处的意外令牌<”

1 个答案: