问题描述
我正在学习React打字稿.我正在使用React Google Maps显示我的区域.我成功地能够显示地图.当我尝试使用react-google-map中的Marker指出我的区域并定位我的经度和纬度时.我收到打字稿错误:Property 'position' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMapReact> & Readonly<Props> & Readonly<...>
.我真的不知道该如何解决.
I am learning React-typescript. I am using react google maps to show my area. I successfully able to display the map. When I tried to use Marker from react-google-map to point out my area and positioned my latitude and longitude. I am getting typescript error: Property 'position' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMapReact> & Readonly<Props> & Readonly<...>
. I really don't know how to fix it.
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import ErrorBoundary from 'components/errorBoundary';
import GoogleMapReact from 'google-map-react';
import Marker from 'google-map-react'
export interface ITestNewListProps {
className?: string;
position?: { lat: number; lng: number; };
}
const TestMaps = ({ className, position }: ITestNewListProps) => {
const [state, setstate] = useState(
{
center: {
lat: 60.1098678,
lng: 24.7385084
},
zoom: 7
}
)
return (
<ErrorBoundary id="TestNewListErrorBoundary">
<div className={`${className}`}>
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "*************************" }}
defaultCenter={state.center}
defaultZoom={state.zoom}
>
<Marker position={{ lat: 60.1098678, lng: 24.7385084 }} />//Geting error from here
</GoogleMapReact>
</div>
</div>
</ErrorBoundary>
);
};
TestMaps.displayName = `test`;
export default styled(TestMaps)`
`;
推荐答案
请记住,google-map-react
允许您在地图上呈现任何React组件.
该库不会导出Marker
组件.
但是,如果要使用默认的Google Maps标记,可以在此处看到解决方案.
根据文档中的示例,您应该可以通过定义您的自己的Marker组件:
Remember that google-map-react
allows you to render any React component on the map.
The library doesn't export a Marker
component.
However, if you want to use the default Google Maps markers you can see a solution here.
Based on the example from the documentation, you should be able to achieve something like this by defining your own Marker component:
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const Marker = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
return (
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<Marker
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;
这篇关于React-TypeScript:类型"IntrinsicAttributes& IntrinsicClassAttributes< GoogleMapReact>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!