在react-google-maps中使用<Polygon>组件的代码问题咨询

让我仔细看了你的代码，这里存在几个关键问题，会导致组件无法正常工作，我来帮你梳理并给出正确的实现方式：

代码中的问题点 #

• 变量拼写错误：你定义了const coords = [...]，但在Polygon的path属性里写的是cords，这会直接抛出cords is not defined的错误。
• Polygon组件的使用上下文错误：<Polygon>不能单独渲染，它必须作为<GoogleMap>组件的子元素，因为它依赖于Google地图实例的上下文才能正常渲染。
• API密钥的误用：把API密钥作为Polygon的key属性完全没必要，API密钥应该在加载Google Maps脚本的时候传入，而不是给Polygon做标识。
• 过时的React语法：你导入了PropTypes但没有使用，而且现在React已经将PropTypes移到了单独的prop-types包中；另外类组件写法可以换成更简洁现代的函数式组件。
• 缺少必要的高阶组件包裹：react-google-maps需要通过withScriptjs和withGoogleMap这两个高阶组件来包装你的地图组件，用于加载Google Maps脚本并提供地图上下文。

正确的实现方式 #

下面我给出两种实现方案，优先推荐函数式组件的写法：

方案1：函数式组件（推荐） #

import React from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Polygon } from "react-google-maps";

// 创建地图组件
const MapWithPolygon = withScriptjs(withGoogleMap(() => (
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: 1, lng: 1 }} // 这里设置地图的默认中心点，和你的多边形坐标匹配
  >
    <Polygon
      path={[
        { lat: 0, lng: 0 },
        { lat: 1, lng: 1 },
        { lat: 2, lng: 2 }
      ]}
      options={{
        fillColor: "#FF0000",
        fillOpacity: 0.5,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 2
      }} // 可以自定义多边形的样式
    />
  </GoogleMap>
)));

// 你的MapsItem组件
export default function MapsItem() {
  const apiKey = "myapikeyhere"; // 替换成你的真实API密钥

  return (
    <div className="col-sm-12">
      <MapWithPolygon
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apiKey}`}
        loadingElement={<div style={{ height: "100%" }} />}
        containerElement={<div style={{ height: "400px" }} />} // 设置地图容器的高度
        mapElement={<div style={{ height: "100%" }} />}
      />
    </div>
  );
}

方案2：类组件写法（兼容旧版习惯） #

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Polygon } from "react-google-maps";
import PropTypes from 'prop-types'; // 需要先安装prop-types包：npm install prop-types

const MapWithPolygon = withScriptjs(withGoogleMap(class extends Component {
  render() {
    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 1, lng: 1 }}
      >
        <Polygon
          path={this.props.coords}
          options={{
            fillColor: "#FF0000",
            fillOpacity: 0.5,
            strokeColor: "#FF0000",
            strokeOpacity: 1,
            strokeWeight: 2
          }}
        />
      </GoogleMap>
    );
  }
}));

MapWithPolygon.propTypes = {
  coords: PropTypes.arrayOf(PropTypes.shape({
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired
  })).isRequired
};

export default class MapsItem extends Component {
  render() {
    const apiKey = "myapikeyhere";
    const coords = [
      { lat: 0, lng: 0 },
      { lat: 1, lng: 1 },
      { lat: 2, lng: 2 }
    ];

    return (
      <div className="col-sm-12">
        <MapWithPolygon
          coords={coords}
          googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apiKey}`}
          loadingElement={<div style={{ height: "100%" }} />}
          containerElement={<div style={{ height: "400px" }} />}
          mapElement={<div style={{ height: "100%" }} />}
        />
      </div>
    );
  }
}

额外注意事项 #

• 确保你已经安装了react-google-maps依赖：npm install react-google-maps
• 替换代码中的myapikeyhere为你在Google Cloud控制台申请的真实Maps API密钥，并且确保该密钥已经启用了Maps JavaScript API。
• 地图容器必须设置高度，否则地图会无法显示（上面的代码中已经设置了400px的高度，你可以根据需求调整）。

内容的提问来源于stack exchange，提问作者zennn