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

Posted 2023-03-27

【中文标题】反应传单地图中心没有改变

【英文标题】：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>
        
      </>
    );
  

【参考方案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