时间戳

首页 > 解决方案 > google-map-react 和 google-maps-react 之间的区别？

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

问题描述

当我在 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);

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

提前致谢

标签： reactjsgoogle-mapsgoogle-maps-react

解决方案

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

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

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

推荐阅读