88av在线播放,国产精品中文,日韩视频在线观看免费

本文介紹了Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 屬性?的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

我試圖在以下位置找到它:

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 內登錄，則引用 Map

If you log inside componentDidMount the reference to the Map
```
componentDidMount() {
    const map = this.mapRef.leafletElement;
    console.log(map)
} 
```
在_zoomBoundLayers: {26: NewClass}下__proto__:NewClass底部的控制臺展開，你可以看到繼承的方法和invalidateSize 被顯示出來，因此在那里提供.

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.

編輯

我以為你在使用 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 &copy; <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__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.

演示

這篇關于Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 屬性?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

【網(wǎng)站聲明】本站部分內容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯(lián)系我們刪除處理，感謝您的支持！

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 屬性

問題描述

推薦答案

相關文檔推薦