Difference between google-map-react and google-maps-react?

Question

当我在reactjs中使用谷歌地图时，我发现了两个不同的npm，如google-map-react和google-maps-react。由于我是反应的初学者，所以我有点困惑使用什么(首选(。虽然我找到了这个链接，但它有点不同，这是关于 - 谷歌地图反应和反应谷歌地图之间的区别

以下是 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);

请帮助我哪个是最好的使用。

提前致谢

Answer 1

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

另一方面，google-map-react渲染了一个地图，您可以在其中将自定义的 react 组件放在任何坐标中。 这两个库都可用于实现 API 服务，如自动完成或方向服务。

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

Answer 2

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

这里需要注意的是，google-map-react包的更新频率高于google-maps-react。谷歌地图反应包的平均每周下载量为185,833(7月13日21日(，而谷歌地图反应的平均每周下载量为54,750(7月13日21日(。

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