google-map-react 和 google-maps-react 之间的区别？答案

【问题标题】：Difference between google-map-react and google-maps-react?google-map-react 和 google-maps-react 之间的区别？
【发布时间】：2019-12-16 17:39:57
【问题描述】：

当我在 reactjs 中使用 Google 地图时，我发现了两个不同的 npm，例如 google-map-react 和 google-maps-react。因为我是反应的初学者，所以我有点困惑使用什么（更喜欢）。虽然我找到了this link，但它有点不同 - google-map-react 和 react-google-maps

之间的区别

以下是google-map-react的示例代码

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

以下是google-maps-react的示例代码

import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker } from "google-maps-react";

const mapStyles = {
  width: "100%",
  height: "100%"
};
class MapContainer extends Component {
  constructor(props) {
    super(props);    
    this.state = {
      stores: [
        { lat: 47.49855629475769, lng: -122.14184416996333 },
        { latitude: 47.359423, longitude: -122.021071 },
        { latitude: 47.5524695, longitude: -122.0425407 }
      ]
    };
  }
  displayMarkers = () => {
    return this.state.stores.map((store, index) => {
      return (
        <Marker
          key={index}
          id={index}
          position={{
            lat: store.latitude,
            lng: store.longitude
          }}
          onClick={() => console.log("Clicked me..!")}
        />
      );
    });
  };
  render() {
    return (
      <div>
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176 }}
        >
          {this.displayMarkers()}
        </Map>
      </div>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "key"
})(MapContainer);

请帮我哪个最适合使用。

提前致谢

【问题讨论】：

标签： reactjs google-maps google-maps-react

【解决方案1】：

据我了解，google-maps-react主要专注于绘制几何形状，如标记、信息窗口、折线、多边形或圆形。他们还为地图提供延迟加载。我在我的两个项目中使用了这个库。

另一方面，google-map-react 呈现一个地图，您可以在其中将自定义的反应组件放置在任何坐标中。这两个库都可用于实现 API 服务，例如 autocomplete 或 direction-services。

您可以根据需要使用其中任何一种。

【讨论】：

【解决方案2】：

我想在我的项目中使用其中一个包，我使用这两个包创建了示例项目，以便测试性能。我想绘制数千个标记，我的主要要求是性能。我发现 google-maps-react 比 google-map-react 更好地处理数据集的大型标记 (>= 10000)。请注意，对于我的项目，我不允许使用集群，并且所有标记都应该在地图上始终可见。聚类 google-map-react 即使在较大的标记数据集下也能正常工作。

请务必注意，google-map-react 软件包的更新频率高于 google-maps-react。 google-map-react 软件包的平均每周下载量为 185,833（7 月 13 日），而 google-maps-react 的平均每周下载量为 54,750（7 月 13 日）。 p>

请注意，对于这么多人绘制数千个标记和相对性能非常重要，所以我决定写一个单独的答案。很抱歉，因为我赶时间，所以没有写出具体的性能数据。

【讨论】：