我想把Marker组件传给GoogleMapReact的孩子

Question

使用Typescript和react
标记使用谷歌地图react显示在单击的位置
将Marker组件传递给带有子级的GoogleMapReact时，会发生以下错误。如果你知道如何解决这个问题，请告诉我。

错误

(别名(类GoogleMapReact(别名(命名空间GoogleMapReactimportGoogleMapReact没有与此调用匹配的重载。过载1/2，"(props:props|Readonly(:googleMapReact"，导致跟随错误类型"｛children：Element；bootstrapURLKeys:｛key:string；｝；"；defaultCenter:｛lat:数字；lng:数字；｝；defaultZoom：数字；onClick:(e:ClickEventValue(=>void；｝'无法分配给类型'本质属性&IntrinsicClassAttributes&只读"。类型"IntrinsicAttributes&"的属性"children"不存在；IntrinsicClassAttributes&只读">
重载第2个，共2个，'(props:props，context:any(：googleMapReact'，导致以下错误类型"｛children：Element；bootstrapURLKeys:｛key:string；｝；"；defaultCenter:｛lat:数字；lng:数字；｝；defaultZoom：数字；onClick:(e:ClickEventValue(=>void；｝'无法分配给类型'本质属性&IntrinsicClassAttributes&只读"。类型"IntrinsicAttributes&"的属性"children"不存在；IntrinsicClassAttributes&只读"。

import GoogleMapReact from 'google-map-react';
export const Area = () => {
const defaultLatLng = {
lat: 10.99835602,
lng: 77.01502627,
},
return (
<Box height="340px">
<GoogleMapReact
bootstrapURLKeys={{ key: Key }}
defaultCenter={defaultLatLng}
defaultZoom={10}
>
<Maker lat={59.955413} lng={30.337844} />
</GoogleMapReact>
</Box>
)
}
interface SubProps {
lat: number;
lng: number;
}
const Maker: FunctionComponent<SubProps> = () => <img src="location.svg"} />

Answer 1

可能与您的依赖关系有关。

我的代码与你的代码相似：

return (
<div style={{ height: "100%", width: "100%" }}>
<GoogleMapReact
center={center}
zoom={zoom}
draggable={draggable}
onChange={onChange}
onChildMouseDown={onMarkerInteraction}
onChildMouseUp={onMarkerInteractionMouseUp}
onChildMouseMove={onMarkerInteraction}
onChildClick={onStoreMarkerClick}
onClick={onClick}
bootstrapURLKeys={{
key: process.env.REACT_APP_GOOGLE_MAP_API_KEY!,
libraries: ["places", "geometry"],
}}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}
>
<GoogleMapCenterMarker />
{storeLocations.map((storeLocation) => (
<GoogleMapStoreMarker
key={storeLocation.uniqueStoreName}
lat={storeLocation.storeLocationLatitude}
lng={storeLocation.storeLocationLongitude}
store={storeLocation}
/>
))}
</GoogleMapReact>
<div className="mt-4">
<div className="text-center">
{" "}
Latitude: <span>{lat}</span>, Longitude: <span>{lng}</span>
</div>
<div className="text-center">
{" "}
Zoom: <span>{zoom}</span>
</div>
<div className="text-center">
{" "}
Address: <span>{address}</span>
</div>
</div>
</div>
);

以下是我的谷歌地图相关依赖项列表：

├─ @googlemaps/js-api-loader@1.13.7
├─ @types/google-map-react@2.1.5
├─ @types/google.maps@3.48.1
├─ google-map-react@2.1.10
│  ├─ @googlemaps/js-api-loader@^1.7.0
│  ├─ workbox-google-analytics@6.5.2
├─ workbox-google-analytics@6.5.2