如何从 react-google-maps 迁移到 @react-google-maps/api

问题描述

我想将 react-google-maps 迁移到 @react-google-maps/api。

我的问题是我是开发新手，不知道如何轻松完成？

我尝试了多种方法，但大多数情况下我都遇到了错误钩子调用无效。钩子只能在函数组件内部调用。

下面，我想迁移的功能：

import { withScriptjs,withGoogleMap,GoogleMap } from "react-google-maps";
import { SearchBox } from "react-google-maps/lib/components/places/SearchBox";

const CustomSkinMap = pose(useLoadScript,withGoogleMap)((props) => {  
 
  return (
    <GoogleMap
      ref={props.onMapLoad}
      center={{ lat: parseFloat(props.center.lat),lng: parseFloat(props.center.lng) }}
      defaultZoom={13}
      //defaultCenter={{ lat: props.lat,lng: props.lng }}
      onDragEnd={props.onDragEnd}
      onBoundsChanged={props.onBoundsChanged}
      defaultOptions={{
        scrollwheel: true,disableDefaultUI: true,defaultVisible: true,zoomControl: true
      }}
    >
      <SearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
        bounds={props.bounds}
        controlPosition={google.maps.ControlPosition.TOP_LEFT}
      >
        <input
          type="text"
          className="location"
          placeholder={props.t("Homepageheader._AddAddress")}
          onChange={props.changeInMap}
          style={{
            boxSizing: "border-box",border: "1px solid transparent",margin: "10px 10px 0 10px",width: "95%",height: "32px",padding: "0 12px",borderRadius: "3px",boxShadow: "0 2px 6px rgba(0,0.3)",fontSize: "14px",outline: "none",textOverflow: "ellipses"
          }}
        />
      </SearchBox>
    </GoogleMap>
  );
});

欢迎所有帮助。提前谢谢你...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-google-maps react-hooks reactjs reactjs