如何解决不在 App.js 中时反应传单地图位置故障
我正在尝试在我的 React 应用程序中使用 Leaflet 地图，但我遇到了一个奇怪的问题。我告诉我的地图在 whenReady 函数中平移到用户的当前地理位置（如果他们允许访问他们的位置），但是当它这样做时，地图会出现故障。更奇怪的是，只有当我将地图放在从 App.js 路由到的视图中时才会发生这种情况（我想将它与导航栏一起显示）。当它在 App.js 本身中时，不会发生这种情况，并且地图会正确显示我的位置。我附上了图片来说明我的意思：
当地图在 App.js 中时：
当地图在另一个组件中时：
这是我针对两种情况的代码：
地图在 App.js 中时的代码：
import React,{Component} from 'react';
import L from 'leaflet';
import './MapView.css';
import fence from './assets/fence.png';
import pin from './assets/pin.png';
import { MapContainer,TileLayer,Marker,Popup } from 'react-leaflet';
class App extends Component {
constructor() {
super();
this.state = {
markers: [],center: [51.505,-0.09]
};
this.addMarker = this.addMarker.bind(this)
}
fence = L.icon({
iconUrl: fence,iconSize: [46.3125,51.5625],// size of the icon
iconAnchor: [22,25],// point of the icon which will correspond to marker's location
popupAnchor: [0,-25]
});
addMarker = (e) => {
const {markers} = this.state
markers.push(this.state.center)
this.setState({markers})
}
render() {
const self = this;
return (
<div className="map-container">
<button onClick={this.addMarker} className="btn">+</button>
<div className="center"></div>
<MapContainer
className="map"
minZoom= {8}
zoom={20}
center = {this.state.center}
whenReady={(map) => {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function (location) {
console.log(location);
map.target.panTo(new L.LatLng(location.coords.latitude,location.coords.longitude))
var marker = L.marker([location.coords.latitude,location.coords.longitude],{icon: L.icon({
iconUrl: pin,iconSize: [24,38],// size of the icon
iconAnchor: [12.5,40],// point of the icon which will correspond to marker's location
popupAnchor: [0,-50]
})} ).addTo(map.target);
marker.bindPopup("Your current location")
marker.openPopup()
});
}
map.target.on("drag",function (e) {
self.setState({center: map.target.getCenter()})
});
map.target.on("zoom",function (e) {
self.setState({center: map.target.getCenter()})
})
}}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
></TileLayer>
{this.state.markers.map((position,idx) =>
<Marker key={`marker-${idx}`} icon={this.fence} position={position}>
<Popup>
<span>Title<br/></span>
</Popup>
</Marker>
)}
</MapContainer>
</div>
);
}
}
export default App;
地图在另一个视图中时的代码，从 App.js 路由：
//App.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import MapView from './MapView';
import AddView from './AddView';
import Navbar from './Navbar';
function App() {
return (
<div className="App">
<Router>
<Navbar/>
<Switch>
<Route exact from="/" component={MapView} />
<Route exact path="/new" component={AddView} />
</Switch>
</Router>
</div>
);
}
export default App;
//MapView.js
import React,Popup } from 'react-leaflet';
class MapView extends Component {
constructor() {
super();
this.state = {
markers: [],-25]
});
addMarker = (e) => {
const {markers} = this.state
markers.push(this.state.center)
this.setState({markers})
}
render() {
const self = this;
return (
<div className="map-container">
<button onClick={this.addMarker} className="btn">+</button>
<div className="center"></div>
<MapContainer
id="map"
className="map"
minZoom= {8}
zoom={20}
center = {this.state.center}
whenReady={(map) => {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function (location) {
localStorage.setItem('latitude',location.coords.latitude)
localStorage.setItem('longitude',location.coords.longitude)
let latitude= location.coords.latitude;
let longitude= location.coords.longitude;
console.log(location);
map.target.panTo(new L.LatLng(latitude,longitude))
var marker = L.marker([latitude,longitude],{icon: L.icon({
iconUrl: pin,iconAnchor: [12.5,popupAnchor: [0,-50]
})} ).addTo(map.target);
marker.bindPopup("Your current location")
marker.openPopup()
});
} else {
console.log("Ik kom erin bro wtf")
let latitude = localStorage.getItem('latitude') ?? 51.505
let longitude = localStorage.getItem('longitude') ?? -0.09
map.target.panTo(new L.LatLng(latitude,longitude))
}
map.target.on("drag",function (e) {
self.setState({center: map.target.getCenter()})
});
map.target.on("zoom",function (e) {
self.setState({center: map.target.getCenter()})
})
}}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
></TileLayer>
{this.state.markers.map((position,idx) =>
<Marker key={`marker-${idx}`} icon={this.fence} position={position}>
<Popup>
<span>Title<br/></span>
</Popup>
</Marker>
)}
</MapContainer>
</div>
);
}
}
export default MapView;
//Navbar.js
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {
Link
} from "react-router-dom";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,},menuButton: {
marginRight: theme.spacing(2),title: {
flexGrow: 1,bar: {
height: '7.5vh',}
}));
function Navbar() {
const classes = useStyles();
return (
<AppBar position="static" className={classes.bar}>
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Work in progress
</Typography>
<Link color="inherit" to="/new">Report construction</Link>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
);
}
export default Navbar;
我对 Leaflet 的了解不多，因为这是我用它制作的第一个应用程序，所以如果我混淆了这背后的一些理论，请考虑到这一点。有谁知道我的代码、我的思维方式是否有问题，或者这背后是否有一些我遗漏的传单理论？我期待听到任何答案。
解决方法
这是因为您已将地图缩放指定为 20，而上限为 19。您可以在此post
上找到更多原因您所要做的就是在 maxZoom 组件上设置 maxNativeZoom 和 TileLayer 道具
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
maxNativeZoom={19}
maxZoom={22}
/>
您可能想尝试在平移到 whenReady() 内的位置之前设置延迟。函数启动时地图可能没有完全渲染，这可能会解决问题
setTimeout(() => { this.goToLocation() },1000);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
