4

当我在 reactjs 中使用谷歌地图时，我发现了两个不同的 npm，比如 google-map-react和google-maps-react。因为我是反应的初学者，所以我有点困惑使用什么（更喜欢）。虽然我找到了这个链接，但它有点不同 - 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);

请帮助我哪个最适合使用。

提前致谢

4

2 回答 2

4

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

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

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

于 2020-02-25T05:32:19.383 回答
1

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

这里需要注意的是google-map-react包的更新频率比google-maps-react更频繁。google-map-react包的平均每周下载量为185,833（7 月 21 日），而google-maps-react 的平均每周下载量为 54,750（7 月 21 日）。

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

于 2021-07-13T18:11:51.893 回答