我试图在以下位置找到它:
- this.mapRef.current.leafletElement
- this.mapRef.current.getLeafletElement()
- 使 this.mapRef.current.getLeafletElement().invalidateSize 失效
- this.mapRef.current.leafletElement
这里是我的 react 片段:
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 href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
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 的属性，
任何提示都会很棒， 谢谢
最佳答案
如果您在 componentDidMount 中登录对 Map 的引用
componentDidMount() {
const map = this.mapRef.leafletElement;
console.log(map)
}
并在_zoomBoundLayers: {26: NewClass} 下的底部__proto__: NewClass 控制台中展开，您可以看到继承的方法和invalidateSize 显示并因此在那里提供。
编辑
我以为你用的是 react-leaflet。
如果不使用 React 传单，您可以使用以下代码获取对 map 实例的引用。
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 href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
console.log(this.map)
}
render() {
return (
<div id="map"/>
);
}
}
然后像 react-leaflet 版本那样做:在控制台底部 __proto__: NewClass 下 _zoomBoundLayers: {26: NewClass} 展开你可以看到继承的方法和显示 invalidateSize 的方法，因此在此处提供。
关于javascript - Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56176938/