javascript - Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?
问题描述
我试图在以下位置找到它:
- 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)
}
并在底部的控制台中展开,__proto__: NewClass
您_zoomBoundLayers: {26: NewClass}
可以看到继承的方法,这些方法invalidateSize
显示并因此提供在那里。
编辑
我以为你在使用 react-leaflet。
在不使用 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 版本中执行:在底部的控制台中展开,__proto__: NewClass
您_zoomBoundLayers: {26: NewClass}
可以看到继承的方法,这些方法invalidateSize
显示并因此提供在那里。
推荐阅读
- c# - 如何检查字符和/或字符串是大写还是小写
- bootstrap-vue - 如何为 bootstrap-vue 表中的两个不同列添加两个不同的搜索框
- java - 我可以从面板访问创建 JFrame 的类的变量和/或方法吗?
- c# - 无法在真实手机上运行 xamarin 应用程序并且 GPS getLocation 工作缓慢
- sql - 大查询中的 charindex 函数
- django - 覆盖度静态分析应该在什么阶段进行?
- node.js - Node.js - Swagger - 无法呈现此定义
- php - 查询未插入数据库的失败数据
- android - 分享图片时如何更改图库中显示的应用名称?
- powershell - 将缺失属性值的 ROW 添加到 Export-CSV