Circle 未使用 React Google Maps API 在谷歌地图上呈现

Question

我正在尝试使用 React 的 google maps api 渲染一个 google circle，但它没有显示出来。我们没有收到任何错误消息。不明白为什么按照说明设置了圆的defaultCenter和radius后还是不能渲染圆。

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import bunnyHere from "../../../images/here.png";
import { Map, GoogleApiWrapper, Marker} from "google-maps-react";
import Circle from "google-maps-react";
import BackButton from "../../../components/Buttons/BackButton/BackButton";
import Button from "@material-ui/core/Button";

class FindHospitalPage extends Component {
  state = {
    markers: [
      { lat: 35.700688, lng: 139.772478 },
      { lat: 35.713521, lng: 139.799845 }
    ]
  };

  render() {
    return (
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginRight: "15px"
          }}
        >
          <NavLink to="/homepage">
            <Button>Back To Homepage</Button>
          </NavLink>
        </div>
        <div>
          <Map
            google={this.props.google}
            zoom={15}
            style={mapStyles}
            initialCenter={{ lat: 35.707719, lng: 139.774846 }}
          >
            {this.state.markers.map((marker, i) => (
              <Marker key={i} position={marker} />
            ))}
            <Marker
              position={{ lat: 35.707719, lng: 139.774846 }}
              icon={bunnyHere}
              animation={this.props.google.maps.Animation.BOUNCE}
            />
            <Circle
                defaultCenter={{ lat: 35.707719, lng: 139.774846 }}
                defaultRadius={500}
                options={{
                  strokeColor: '#0022ff',
                  fillColor: '#0099ff',
                  fillOpacity: 0.1
                }}
            />
          </Map>
        </div>
        <BackButton buttonType={"buttonType_2"} backPage={"/checkout"} />
      </div>
    );
  }
}

// export default FindHospitalPage;
export default GoogleApiWrapper({
  apiKey: "XXX"
})(FindHospitalPage);

Answer 1

我猜你在控制台中收到了这个警告

警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：未定义。您可能忘记导出您的 来自定义它的文件中的组件，或者您可能混淆了 默认和命名导入。

看来Circle 组件的支持是在版本2.0.3 中引入的但 最新 版本的google-maps-react available from npm 可能是2.0.2最好联系库作者为什么2.0.3 仍然无法从 npm 获得。

同时 (2.0.3) 版本可以像这样从 GitHub 安装：

npm install https://github.com/fullstackreact/google-maps-react.git

安装后，以下示例演示如何将地图与圆形一起渲染

class MapExample extends Component {
  render() {
    return (
      <Map
        className={"map"}
        google={this.props.google}
        zoom={5}
        initialCenter={{ lat: -24.6651078, lng: 126.4247918 }}
      >
        <Marker
          position={{ lat: -24.6651078, lng: 126.4247918 }}
          animation={this.props.google.maps.Animation.BOUNCE}
        />
        <Circle center={{ lat: -24.6651078, lng: 126.4247918 }} radius={500000} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "--your key goes here--"
})(MapExample);

结果