Question

我正在尝试使用React的Google Maps api渲染一个Google圈子，但没有显示。我们没有收到任何错误消息。我们不理解为什么即使设置了圆的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 {{3的最新版本 }}是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);

结果

available from npm

Circle无法使用React Google Map的API在Google地图上呈现

1 个答案: