反应传单地图未正确显示
Posted
技术标签:
【中文标题】反应传单地图未正确显示【英文标题】：react-leaflet map not correctly displayed 【发布时间】：2017-03-14 21:49:12 【问题描述】：我正在尝试使用react-leaflet 来显示地图。我使用来自this fiddle 的代码，它正在工作，但在我的电脑上我有这个输出
这是我的代码：
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 href="http://osm.org/copyright">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%;
控制台中没有错误，我不知道在哪里搜索。由于小提琴正在工作，因此它不是错误。我错过了什么吗？
【问题讨论】：
【参考方案1】：看起来您还没有加载到 Leaflet 样式表中。
来自react-leaflet GitHub 指南：
如果您不熟悉 Leaflet，请确保在使用此库之前阅读其快速入门指南。 您需要将其 CSS 添加到您的页面以正确呈现地图，并设置容器的高度。
http://leafletjs.com/examples/quick-start/
这是你需要的：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
更新
注意@ThomasThiebaud 表示您可能还需要设置.leaflet-container 的高度
--
Ange Loron 还提供了一个正确的、可选的 JS 模块导入（vs cdn 或样式链接）
import 'leaflet/dist/leaflet.css';
对于它的价值，文档页面设计不佳...维护者在 GitHub 中不断处理这个问题，但由于某种原因，这个问题是*错误的用户连续不进行所需的设置。 /s
【讨论】：
感谢您的回答。有了这条线，我失去了一切（没有错误，没有显示）。我认为地图的高度还有另一个问题，因为我使用的是 css 模块。我明天会调查。 @ThomasThiebaud 听起来不错，还想确保您的传单版本与我提供的链接匹配，并设置地图组件/容器的高度。 我明白了！您还必须设置.leaflet-container 的高度
有趣的是，*** 的答案有时会提供比官方文档更好的信息。
你是一个美丽的人。此评论保存了我的项目【参考方案2】：
您可以通过在 index.html 的 head 元素中添加以下代码行来修复。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<style>
body
padding-bottom: 30px;
h1, h2, p
font-family: sans-serif;
text-align: center;
.leaflet-container
height: 400px;
width: 80%;
margin: 0 auto;
</style>
注意：您可以更改 CSS 以满足您的需要。
【讨论】：
【参考方案3】：**Go to your react app folder my-app/public/index.html open index.html
and pest this two links in head tag
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head>**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<style>
#mpp
overflow: hidden;
</style>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
【讨论】：
【参考方案4】：以防万一有人遇到同样的问题，我只需添加以下内容即可解决：
import 'leaflet/dist/leaflet.css';
【讨论】：
【参考方案5】：试试这个
import React, Component from 'react'
import Leaflet from 'leaflet';
import Map, TileLayer, Marker, Popup from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
Leaflet.Icon.Default.imagePath =
'../node_modules/leaflet'
delete Leaflet.Icon.Default.prototype._getIconUrl;
Leaflet.Icon.Default.mergeOptions(
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
);
export default class MapDisplay extends Component
state =
lat: 41.257017,
lng: 29.077524,
zoom: 13,
render()
const position = [this.state.lat, this.state.lng]
return (
<Map center=position zoom=this.state.zoom style=height : '400px'>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://s.tile.openstreetmap.org/z/x/y.png"
/>
<Marker position=position>
<Popup>
Son Konum
</Popup>
</Marker>
</Map>
)
【讨论】：
它有助于查看地图。但我看不到标记图标 no... 这解决了我的问题 --> Leaflet.Icon.Default.imagePath = '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/'; 【参考方案6】：导入leaflet.css
import 'leaflet/dist/leaflet.css';
添加传单文件后，有时会出现两个有关图像加载的错误。要解决这些错误，请在导入部分导入 marker-icon.png 和 marker-shadow.png，然后定义 L.Marker.prototype.options.icon：
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
let DefaultIcon = L.icon(
...L.Icon.Default.prototype.options,
iconUrl: icon,
iconRetinaUrl: iconRetina,
shadowUrl: iconShadow
);
L.Marker.prototype.options.icon = DefaultIcon;
如果地图没有显示，请将高度和宽度(style=width: '100%',height: '400px') 作为样式添加到地图标签中：
<Map
center=[35.6892, 51.3890]
style=width: '100%',height: '400px'
>
Add height and width
【讨论】：
【参考方案7】：这解决了我的问题：
将其添加到 index.html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<style>
.leaflet-container
height: 400px;
width: 800px;
</style>
来源：https://medium.com/@eugenebelkovich/map-for-react-apps-with-leaflet-365f9df82d55
【讨论】：
【参考方案8】：试试这个：
var mapid = $(this).find('[id^=leaflet-map]').attr('id');
var map = settings.leaflet[mapid].lMap;
map.invalidateSize();
【讨论】：
【参考方案9】：我也是使用这个库的新手，并且没有找到足够清晰的文档。但是，我认为有一些必要的东西才能让它发挥作用。
1. react-leaflet 包
2。传单包：
或者，使用 npm 安装它
npm install leaflet 和import 'leaflet/dist/leaflet.css'; 在您使用Map 的文件中来自react-leaf。
或
在index.html 中包含这两行：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
3.将此添加到 App.css 或 index.css 并导入文件：（这是必须的）
.leaflet-container
width: 100wh;
height: 100vh;
// 或者直接向地图容器添加样式
<Map
center=position
zoom=1
style= height: '100vh', width: '100wh'
>
<TileLayer .... />
</Map>
【讨论】：
谢谢，只需要修正宽度 style= height: '100vh', width: '100wh' 【参考方案10】：在 Leaflet Map 中，如果您的地图未正确显示，则此问题是由 CSS 文件引起的。
在你的 public/index.html 中试试这个 CSS
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>
【讨论】：
【参考方案11】：如果这些都不适合您，您可以尝试在页面加载时手动调整窗口大小。
window.dispatchEvent(new Event('resize'));
【讨论】：
【参考方案12】：即使设置了高度和 CSS，我的地图也完全没有显示出来。 您需要将以下传单 cdn 和 css 添加到您的 index.html 文件中才能正常工作：
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<style>
.leaflet-container
height: 500px;
width: 960px;
</style>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
【讨论】：
【参考方案13】：在我的情况下，React 添加这有助于：
<MapContainer
center= lat: 51.505, lng: -0.09
zoom=13
style= height: "50vh", width: "100%"
scrollWheelZoom=false
>
vh至少需要1个参数高度或宽度，否则如果只使用100%/100%就不行了
【讨论】：
【参考方案14】：你应该把它添加到你的 CSS 文件中，我和你有同样的问题，这个方法解决了我的问题：
@import url("~leaflet/dist/leaflet.css");
.leaflet-container
width: 100%;
height: 100vh;
【讨论】：
这很聪明【参考方案15】：如果有人在寻找如何将其嵌入到单独的组件中，经过一番努力，我想出了如何做到这一点
import React from 'react';
import MapContainer, Marker, Popup, TileLayer from "react-leaflet";
import './MapObject.css'
const position = [51.505, -0.09]
class MapObject extends React.Component
render()
return (
<MapContainer center=position zoom=13 scrollWheelZoom=false>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://s.tile.openstreetmap.org/z/x/y.png"
/>
<Marker position=position>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
然后它被简单地加载
import MapObject from './MapObject'
而且 MapObject.css 需要看起来像这样（没有这个它根本不会出现）
.leaflet-container
width: 100%;
height: 100vh;
结果图在这里：
【讨论】：
【参考方案16】：不知道为什么，添加Leaflet css文件还不够……
看来你还得补充：
.leaflet-container
height:500px;
【讨论】：
以上是关于反应传单地图未正确显示的主要内容，如果未能解决你的问题，请参考以下文章