Circle 未在 google 地图上使用 React Google 地图 API 渲染

Question

我正在尝试使用 React 的 google 地图 api 渲染一个 google 圆圈，但它没有显示出来。我们没有收到任何错误消息。我们不明白为什么我们设置了圆的默认中心和半径后，按照说明无法渲染圆。

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

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

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

看来 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);

结果

Circle 未在 google 地图上使用 React Google 地图 API 渲染

Circle is not rendering on google map with React Google Map's API

javascript

google-maps

google-maps-api-3

reactjs