传单_ ReactJS-在哪里可以找到invalidateSize属性? [英] Leaflet _ ReactJS - Where to find the invalidateSize property?
问题描述
我试图在以下位置找到它:
- this.mapRef.current.leafletElement
- this.mapRef.current.getLeafletElement()
- 使this.mapRef.current.getLeafletElement().invalidateSize无效
- this.mapRef.current.leafletElement
这是我的反应片段:
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传单的情况下，您可以使用以下代码获取对地图实例的引用.
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版本中的操作:在控制台中，在_zoomBoundLayers: {26: NewClass}下的底部__proto__: NewClass中展开，您可以看到继承的方法，并显示并因此提供了invalidateSize.
I have tried to find it in:
- this.mapRef.current.leafletElement
- this.mapRef.current.getLeafletElement()
- invalidating this.mapRef.current.getLeafletElement().invalidateSize
- this.mapRef.current.leafletElement
here my react snippet:
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>
)
}
}
I cant find the invalidateSize's property,
any hint would be great, thanks
If you log inside componentDidMount the reference to the Map
componentDidMount() {
const map = this.mapRef.leafletElement;
console.log(map)
}
and expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.
Edit
I thought you were using react-leaflet.
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 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"/>
);
}
}
and then do as in the react-leaflet version: expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.
这篇关于传单_ ReactJS-在哪里可以找到invalidateSize属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
