反应传单地图中心没有改变答案

【问题标题】：React leaflet map center not changing反应传单地图中心没有改变
【发布时间】：2021-04-29 20:23:52
【问题描述】：

我正在设置一个地图来查找一个人的坐标，然后将该位置放在地图上。但是由于某种原因，坐标没有显示在地图上。我 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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </MapContainer>
        }
      </>
    );
  }
}

【问题讨论】：

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

来自官方文档

除了它的孩子之外，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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
     />
     <ChangeMapView coords={position} />
</MapContainer>

Demo

【讨论】：