使用React Leaflet更改贴图位置

npm install react-leaflet leaflet

yarn add react-leaflet leaflet

import React from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';

render() {
  const position = [51.505, -0.09];

  return (
    <Map center={position} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="..."
      />
      {/* 添加其他地图图层或者标记 */}
    </Map>
  );
}

import React, { useState } from 'react';

function MapComponent() {
  const [position, setPosition] = useState([51.505, -0.09]);

  const handleClick = () => {
    setPosition([52.379189, 4.899431]); // 更新位置为阿姆斯特丹的经纬度
  };

  return (
    <div>
      <button onClick={handleClick}>更改贴图位置</button>
      <Map center={position} zoom={13}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="..."
        />
        {/* 添加其他地图图层或者标记 */}
      </Map>
    </div>
  );
}

export default MapComponent;