問題描述
我試圖在以下位置找到它:
I have tried to find it in:
- this.mapRef.current.leafletElement
- this.mapRef.current.getLeafletElement()
- 使 this.mapRef.current.getLeafletElement().invalidateSize 失效
這里是我的反應片段:
import React, {Component, Fragment} from "react"; import L from "leaflet" import "~/lib/leaflet/leaflet.css" import "~/lib/leaflet/leaflet" import styled from "styled-components" import Head from 'next/head' constructor(props) { super(props); this.mapRef = React.createRef(); } componentDidMount(){ // console.log("this.map: ", this.map); console.log("this.refs.mapTest: ", this.mapRef.current.leafletElement // or other trial) {...} this.map= L.map("map", { center:location, zoom:12, zoomControl:true }) {...} } render(){ return ( <Fragment> <Head> <link /> <link /> <link rel="stylesheet" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> </Head> <Wrapper ref={this.mapRef} width="100%" height="80vh" id="map" /> </Fragment> ) } }我找不到invalidateSize的屬性，
I cant find the invalidateSize's property,
任何提示都會很棒，謝謝
any hint would be great, thanks
推薦答案
如果你在
componentDidMount內登錄，則引用MapIf you log inside
componentDidMountthe reference to theMapcomponentDidMount() { const map = this.mapRef.leafletElement; console.log(map) }在
_zoomBoundLayers: {26: NewClass}下__proto__:NewClass底部的控制臺展開，你可以看到繼承的方法和invalidateSize被顯示出來，因此在那里提供.and expand in the console on the bottom
__proto__: NewClassunder_zoomBoundLayers: {26: NewClass}you can see the methods that are inherited and thatinvalidateSizeis displayed and therefore provided there.編輯
我以為你在使用 react-leaflet.
I thought you were using react-leaflet.
在不使用 react 傳單的情況下，您可以使用以下代碼獲取對地圖實例的引用.
Without the use of react leaflet you can use the following code to get a reference to the map instance.
class Map extends Component { componentDidMount() { const map = this.map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data © <a >OpenStreetMap</a> contributors, ' + '<a + 'Imagery ? <a , id: 'mapbox.streets' }).addTo(map); console.log(this.map) } render() { return ( <div id="map"/> ); } }然后和 react-leaflet 版本一樣:在控制臺底部展開
__proto__:NewClass下_zoomBoundLayers: {26: NewClass}可以看到繼承的方法，并且invalidateSize顯示并因此提供在那里.and then do as in the react-leaflet version: expand in the console on the bottom
__proto__: NewClassunder_zoomBoundLayers: {26: NewClass}you can see the methods that are inherited and thatinvalidateSizeis displayed and therefore provided there.演示
這篇關于Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 屬性?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯(lián)系我們刪除處理，感謝您的支持！