反应传单地图未正确显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了反应传单地图未正确显示相关的知识，希望对你有一定的参考价值。
我正在尝试使用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%;
}
控制台中没有错误，我不知道在哪里搜索。由于小提琴正在运作，它不是一个错误。我错过了什么 ？
答案
看起来你没有加载在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" />
为了它的价值，文档页面的设计很差......维护者在github中不断处理这个问题，但由于某种原因，问题是持续不做必要设置的用户的错误。
另一答案
您可以通过在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以满足您的需求。
另一答案
**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>
另一答案
为了防止有人遇到同样的问题，我只需添加以下内容即可解决问题：
import 'leaflet/dist/leaflet.css';
另一答案
试试这个
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>
)
}
}
以上是关于反应传单地图未正确显示的主要内容，如果未能解决你的问题，请参考以下文章