[英]Difference between google-map-react and google-maps-react?
While i'm using Google maps in reactjs, I found two different npms like google-map-react and google-maps-react .当我在 reactjs 中使用谷歌地图时,我发现了两个不同的 npm,比如google-map-react和google-maps-react 。 As i'm beginner of react i'm bit confused what to use(prefer).
因为我是反应的初学者,所以我有点困惑使用什么(更喜欢)。 Although I found this link but it is bit different which is about- Difference between google-map-react and react-google-maps
虽然我找到了这个链接,但它有点不同,这是关于 - google-map-react和react-google-maps之间的区别
The following is the sample code for google-map-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;
The following is the sample code for google-maps-react以下是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);
Please help me Which is optimum to use.请帮助我哪个最适合使用。
Thanks in advance提前致谢
As far as I have figured out, google-maps-react mainly focuses on drawing geometric shapes like marker, infowindow, polyline, polygon or circle.据我所知, google-maps-react主要侧重于绘制几何形状,如标记、信息窗口、折线、多边形或圆形。 They also offer lazy loading for the maps.
他们还为地图提供延迟加载。 I have used this library in two of my projects.
我在我的两个项目中使用了这个库。
On the other hand, google-map-react renders a map where you can put a customized react component in any co-ordinate.另一方面, google-map-react渲染了一张地图,您可以在其中将自定义的 React 组件放置在任何坐标中。 Both libraries can be used to implement API services like autocomplete or direction-services .
这两个库都可用于实现 API 服务,如autocomplete或direction-services 。
You may use any one of them according to your needs.您可以根据需要使用其中的任何一种。
I wanted to use one of these packages in my project and that's where I created sample projects using both packages so I can test the performance.我想在我的项目中使用这些包之一,这就是我使用这两个包创建示例项目的地方,以便我可以测试性能。 I wanted to plot thousands of markers and my primary requirement was performance.
我想绘制数千个标记,我的主要要求是性能。 I found that google-maps-react handles large markers (>= 10000) of dataset better than google-map-react .
我发现google-maps-react比google-map-react更好地处理数据集的大标记(> = 10000)。 Please note for my project, I was not allowed to use clusters and all the markers should be visible all the time on the map.
请注意,对于我的项目,我不允许使用集群,并且所有标记都应该在地图上始终可见。 The clustering google-map-react works in a decent way even with larger marker datasets.
即使使用较大的标记数据集,聚类google-map-react 也能以不错的方式工作。
It is important to note here that the google-map-react package is updated more frequently than google-maps-react .重要的是要注意google-map-react包比google-maps-react更新更频繁。 Avg weekly downloads for google-map-react package are 185,833( 13th July 21) while for google-maps-react average weekly downloads 54,750 ( 13th July 21).
google-map-react包的平均每周下载量为 185,833(7 月 13 日 21 日),而google-maps-react 包的平均每周下载量为 54,750(7 月 13 日 21 日)。
Please note for so many people plotting thousands of markers and relative performance are really important so I decided to write as a separate answer.请注意,很多人绘制了数千个标记,相对性能非常重要,因此我决定单独写一个答案。 Apologies for not writing specific performance numbers since I was in hurry.
很抱歉没有写出具体的性能数据,因为我很着急。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.