标签: react-leaflet

在尝试运行一些示例代码时，我收到编译错误；

"Module not found: Can't resolve 'react-leaflet' in 'C:\Users...\my-app\src\map'"

我正在尝试使用react和typescipt来做到这一点，并使用“react-leaflet”

我已经尝试安装 types@react-leaflet 和 react-leaflet

这是我的依赖项：

"dependencies": {
    "@types/jest": "24.0.15",
    "@types/leaflet": "^1.4.4",
    "@types/node": "12.0.8",
    "@types/react": "16.8.20",
    "@types/react-dom": "16.8.4",
    "@types/react-leaflet": "^2.2.1",
    "leaflet": "^1.5.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "save": "^2.4.0",
    "typescript": "3.5.2"
  }

我正在使用反应传单向地图添加一组标记。目前我可以使用自定义图标在地图上显示标记。如何向每个标记添加数据记录。我想我必须以某种方式创建一个自定义标记类？现在有人知道我如何向每个标记或至少一个索引添加数据记录吗？

这是到目前为止的代码：

import React, { Component } from 'react';
import { Map, TileLayer, Marker }  from 'react-leaflet';
import {Navbar, Nav, NavDropdown}  from 'react-bootstrap';
import L from 'leaflet';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      location: {
        lat: -41.2728,
        lng: 173.2995,
      },
      zoom: 8,
      markersData: [],
      fault: {},
      layers: [],
      bounds: {},
      icon: null
    }
  }

  componentDidMount() {
    // Call our fetch function below once the component mounts
    this.callBackendAPI()
    .catch(err => console.log(err));
  }

  componentDidUpdate() { …

React-leaflet 包允许使用 leaflet 并使用功能组件进行反应，至少https://react-leaflet.js.org/上的所有示例都使用功能组件。是否可以在 React-leaflet 版本 3 中使用类组件？如果是的话，有例子吗？

我正在制作这个 React-Leaflet 地图。我想根据用户提供的输入更新 MapContainer 的“center”属性的值，但它不起作用。
我知道，在这种情况下会使用 FlyTo()、panTo() 等方法，但我不知道在哪里/如何应用它们......请帮忙。
这是codesandbox的链接https://codesandbox.io/s/stoic-lamport-kk8mj?file=/src/App.js

我正在使用 React 和 Leaflet 创建一个项目。

该项目将在未连接任何设备的计算机上离线运行，因此我需要将切片图层存储在同一台计算机上（无切片服务器）。

由于我需要一个非常简单的地图，只有几个国家的固定缩放，我想它不会太重。

• 是否可以将整个图块层存储在客户端上？
• 我在哪里可以下载或者如何创建这样的地图供离线使用（必须是免费的）？我只会做一次，所以我更喜欢使用学习曲线较低的工具。

<MapContainer center={[lat,lng]} zoom={z}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" <-- this needs to be stored locally
    />
</MapContainer>

我有以下功能反应组件，它可以在“边界”框中正确显示两个静态标记，该框适合两个标记。

我希望能够传递一系列纬度和经度值以供地图显示，但我不知道如何做到这一点。

这是工作的静态示例：

import React from 'react'
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const MapLeaflet = () => {

// STATIC MARKER POSITIONS
const position = [42.2974279, -85.628292];
const position2 = [-8.852507, -45.351563];

// BOUNDS CODE
const bounds = L.latLngBounds([position, position2]);

return (
    <MapContainer
        className=" map"
        center={position}
        bounds={bounds}
    >
        <Marker key={key} position={position}>
            <Heart/>
        </Marker>
        <Marker key={key} position={position2}>
            <Heart/>
        </Marker>

        <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    </MapContainer>
        
)
}

如果我传递 is {coords} …

我有 nextjs 应用程序+打字稿+反应传单

当我启动我的开发服务器时，npm run dev一切都很好，没有错误，但是当我开始构建时，npm run build我有一个错误，它说。

Type error: Module '"react-leaflet"' has no exported member 'useEventHandlers'.

  1 | import { useMemo, useCallback, useState } from 'react'
> 2 | import { useMap, useMapEvent, useEventHandlers, MapContainer } from 'react-leaflet'
    |                               ^
  3 |
  4 | // Classes used by Leaflet to position controls
  5 | const POSITION_CLASSES = {
info  - Checking validity of types .

这是我的package.json文件。

{
  "name": "spot-nearby",
  "version": "0.1.0",
  "private": true, …

我需要有关基于地图的应用程序的反应传单的帮助。我正在尝试添加一个加载函数，一旦客户端登录到地图，该函数就会在加载时执行。但在react-leaflet上，没有onLoad.

现在我只有这个：

function CenterCoords() {
    const map = useMapEvents({
        // TODO resolve onload
        layeradd() {
            map.locate()
            console.log('loading')
        },
        locationfound(e: any) {
            map.flyTo(e.latlng, map.getZoom())
        },
    })
    return null
}

我只使用了layeradd，但我不知道这意味着什么，并且react-leaflet文档没有提供有关其传单处理函数的提示。如果我依赖传单文档，load似乎loading不起作用。

我已经使用react-leaflet有一段时间了，几周后我删除了node_modules内的文件并重新安装了它们，我根本没有触及react-leaflet版本，但是当我尝试运行该项目时，它给了我一个错误。

./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外的标记 (10:41) 文件已使用这些加载器处理：

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。| useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) {

  const options = props.pathOptions ?? {};

Run Code Online (Sandbox Code Playgroud)

| element.instance.setStyle(选项); | optionsRef.current = 选项；

我想在我的 React-Leaflet 地图上创建一张卡片，显示地图的一些详细信息。但我的第一个问题是，我不能将我的 div（卡片容器）过度覆盖在地图顶部。这是我的代码：

class SimpleExample extends React.Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <LeafletMap center={position} zoom={this.state.zoom}
        id='mapDiv'
        >
        <div
          style={{
            width: 500,
            height: 500,
              top: 0,
                left: 0,
                  backgroundColor: 'red',
                    zIndex: 10
          }}  
        />
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}


ReactDOM.render(<SimpleExample />, document.getElementById('container'))```