如何解决反应传单地图中心没有改变
我正在设置地图以查找某个人的坐标,然后将该位置放在地图上。但出于某种原因,坐标未显示在地图上。我 console.log 以确保状态变量(存储坐标的位置)发出正确的坐标,并且它们是。我不知道为什么地图不会改变它们。
我的代码:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet,Text,View } from "react-native";
import { MapContainer,TileLayer,Marker,Popup } from "react-leaflet";
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from "react-dom";
import "leaflet/dist/leaflet.css";
export default class App extends React.Component {
constructor() {
super();
this.state = {
ready: false,where: { lat: '',lng: '' },error: null,};
}
componentDidMount() {
let geoOptions = {
enableHighAccuracy: true,timeOut: 20000,maximumAge: 60 * 60 * 24,};
this.setState({ ready: false,error: null });
navigator.geolocation.getCurrentPosition(
this.geoSuccess,this.geoFailure,geoOptions
);
}
geoSuccess = (position) => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
console.log(this.state.where?.lng);
console.log(this.state.where?.lat);
this.setState({
ready: true,where: { lat: position.coords.latitude,lng: position.coords.longitude
},});
console.log(this.state.where?.lng);
console.log(this.state.where?.lat);
};
geoFailure = (err) => {
this.setState({ error: err.message });
console.log(this.state.error);
};
render() {
const position = [this.state.where?.lat,this.state.where?.lng];
return (
<>
{(this.state.where != null || this.state.where != undefined) &&
<MapContainer
style={{ height: "100%",width: "100%" }}
center={position}
zoom="30"
scrollWheelZoom={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
}
</>
);
}
}
解决方法
来自官方文档
除了它的孩子,MapContainer 道具是不可变的:改变 第一次设置后,它们将不会影响 地图实例或其容器。
使用将在位置更改时更改地图视图的子组件
function ChangeMapView({ coords }) {
const map = useMap();
map.setView(coords,map.getZoom());
return null;
}
像这样使用它:
<MapContainer
style={{ height: "100vh",width: "100%" }}
center={position}
zoom="30"
scrollWheelZoom={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ChangeMapView coords={position} />
</MapContainer>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。