![](/img/trans.png)
[英]React-Leaflet shows TS2769: No overload matches this call. TypeError
[英]How to fix 'TS2769 No overload matches this call' when using react-leaflet
我正在嘗試在我的反應應用程序上實現 Leaflet map 組件。 這就是我的組件的樣子:
import React from "react";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import "./styles.scss";
const position = [51.505, -0.09];
const LocationMap: React.FC = () => {
return (
<section className="find-container container">
<h2 className="find-title title">Find us</h2>
<Map center={position} zoom={12}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
/>
</Map>
</section>
);
};
export default LocationMap;
當我運行“npm start”時,項目無法編譯,並顯示此錯誤:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<MapProps>): Map<MapProps, Map>', gave the following error.
Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
Type 'number[]' is missing the following properties from type '[number, number]': 0, 1
Overload 2 of 2, '(props: MapProps, context?: any): Map<MapProps, Map>', gave the following error.
Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
Type 'number[]' is not assignable to type 'LatLngTuple'. TS2769
有人知道如何解決嗎?
TypeScript 抱怨,因為center
屬性被聲明為數組( number[]
),而它應該是元組類型:
const position:[number,number] = [51.505, -0.09];
或LatLngLiteral
類型:
const position: LatLngLiteral = { lat: 51.505, lng: -0.09 };
或LatLng
類型:
const position = new LatLng(51.505,-0.09);
總而言之,要使用帶有 TypeScript 的react-leaflet
,需要安裝以下軟件包:
leaflet
作為依賴react-leaflet
和類型定義@types/react-leaflet
最后但同樣重要的是,根據文檔leaflet CSS 文件需要包括在內,例如,通過index.html
:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.