問(wèn)題描述
我正在嘗試使用 react-leaflet 來(lái)顯示地圖.我使用
這是我的代碼:
DeviceMap.js
從'react'導(dǎo)入反應(yīng)從'react-leaflet'導(dǎo)入{地圖，標(biāo)記，彈出窗口，TileLayer}；導(dǎo)出類(lèi) DeviceMap 擴(kuò)展 React.Component {構(gòu)造函數(shù)(){極好的();這個(gè).state = {緯度:51.505，液化天然氣:-0.09，縮放:13，};}使成為() {常量位置 = [this.state.lat, this.state.lng];返回 (<地圖中心={position} zoom={this.state.zoom} scrollWheelZoom={false}>DeviceTabs.js
導(dǎo)出類(lèi) DeviceTabs 擴(kuò)展 React.Component {狀態(tài) = {指數(shù):0};handleTabChange = (索引) =>{this.setState({ index })};使成為 () {返回 (<標(biāo)簽索引={this.state.index} onChange={this.handleTabChange}><標(biāo)簽標(biāo)簽='值'><DeviceTable {...this.props}/></標(biāo)簽><標(biāo)簽標(biāo)簽='地圖'><div className={style.leaflet}><設(shè)備映射/></div></標(biāo)簽></標(biāo)簽>)}}style.scss
.leaflet {高度:300px；寬度:100%；}控制臺(tái)中沒(méi)有錯(cuò)誤，我不知道在哪里搜索.由于小提琴正在工作，因此它不是錯(cuò)誤.我錯(cuò)過(guò)了什么嗎?
看起來(lái)你還沒(méi)有加載 Leaflet 樣式表.
來(lái)自 react-leaflet GitHub 指南:
如果您不熟悉 Leaflet，請(qǐng)確保在使用此庫(kù)之前閱讀其快速入門(mén)指南.您尤其需要將其 CSS 添加到您的頁(yè)面以正確呈現(xiàn)地圖，并設(shè)置容器的高度.
http://leafletjs.com/examples/quick-start/
這是你需要的:
更新
注意 @ThomasThiebaud 表示您可能還需要設(shè)置 .leaflet-container
--
Ange Loron 還提供了一個(gè)正確的、可選的 JS 模塊導(dǎo)入(相對(duì)于 cdn 或樣式鏈接)
導(dǎo)入'leaflet/dist/leaflet.css';
對(duì)于它的價(jià)值，文檔頁(yè)面設(shè)計(jì)不佳...維護(hù)者在 GitHub 中不斷處理這個(gè)問(wèn)題，但由于某種原因，這個(gè)問(wèn)題是*錯(cuò)誤的用戶(hù)不斷不進(jìn)行所需的設(shè)置./s
I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output
Here is my code :
DeviceMap.js
import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
export class DeviceMap extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
render() {
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}>
<TileLayer
attribution='© <a >OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
}
}
export default DeviceMap
DeviceTabs.js
export class DeviceTabs extends React.Component {
state = {
index: 0
};
handleTabChange = (index) => {
this.setState({ index })
};
render () {
return (
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Values'>
<DeviceTable {...this.props} />
</Tab>
<Tab label='Map'>
<div className={style.leaflet}>
<DeviceMap />
</div>
</Tab>
</Tabs>
)
}
}
style.scss
.leaflet {
height: 300px;
width: 100%;
}
There is no error in the console, and I have no more idea where to search. Since the fiddle is working it is not a bug. Did I miss something ?
Looks like you haven't loaded in the Leaflet stylesheet.
From the react-leaflet GitHub guide:
If you are not familiar with Leaflet, make sure you read its quick start guide before using this library. You will notably need to add its CSS to your page to render the map properly, and set the height of the container.
http://leafletjs.com/examples/quick-start/
Here is what you'll need:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
Update
Note @ThomasThiebaud indicates you may also have to set up the height of .leaflet-container
--
Ange Loron also gave a correct, optional, JS module import (vs cdn or style link)
import 'leaflet/dist/leaflet.css';
For what its worth, the documentation page is poorly designed... and the maintainer continuously deals with this issue in GitHub, but for some reason, the issue is the *fault of the users who continuously don't do the required setup. /s
這篇關(guān)于反應(yīng)傳單地圖未正確顯示的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！