标签: react-leaflet

如何动态添加标记到React-Leaflet贴图？

我想在用户点击地图时添加新标记.我无法让它发挥作用.

import React, { Component } from 'react'
import { render } from 'react-dom';
import Control from 'react-leaflet-control';
import { Map, Marker, Popup, TileLayer, ZoomControl, ScaleControl } from 'react-leaflet';
import './Points.scss'

export default class PointsMap extends Component {
  state = {
    lat: 50.2, 
    lng: 30.2,
    zoom: 13,
  }

  handleClick = (e) => {
    this.addMarker();
  }

  addMarker() {

    // A) Following raises error:  
    var marker3 = L.marker([50.5, 30.5]).addTo(this.refs.map);

    // B) With following marker doesn't appear on map:
    const position2 = …

React-leaflet 很好地提供了将内容放入Popup标记中的能力。

例如在我的例子中：

            <Marker position={[item.lat, item.lng]} key={item.machineid}>
              <Popup maxWidth={720}>
                <ItemGrid machineid={item.machineid}
                          username={this.props.username}/>
              </Popup>
            </Marker>

但是，如果此内容太大，则可能会很笨拙，尤其是在移动设备上。我想在单击标记时激活（引导程序）模态界面。有没有办法在反应传单中做到这一点？

我想这个地图边界和中心，它 映射
我试图用的getBounds（）和getCenter（），但它是不确定的。
然后我找到了这个，但它说无法读取未定义的属性“leafletElement”
感谢您的帮助。

class FortMap extends Component {
  state = {
    lat: 51.505,
    lng: -0.09,
    zoom: 18,
  }

  componentDidMount(){
    console.log(this.refs.map.leafletElement.getBounds);
  }

  
  render() {
    const { lat , lng , zoom } = this.state;
    const position = [0, 0];

    return (
        <Map center={position} zoom={zoom}>
          <TileLayer
            url={fortniteMap}
            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          />
        </Map>
    )
  }
}

export default FortMap;

我正在使用 React v.16.12.0 和 @MaterialUI/core v4.8.1。

我正在尝试为 React Leaflet Marker 创建自定义图标。该图标是FabMaterial-UI 中的一个组件。为此，我需要将 HTML 字符串传递给L.DivIcon (DivIcon Docs) Leaflet 组件，因此我renderToString()使用react-dom/server.

它抛出一个错误：

警告：useLayoutEffect 在服务器上不执行任何操作，因为它的效果无法编码为服务器渲染器的输出格式。这将导致初始的、非水合的 UI 与预期的 UI 之间不匹配。为了避免这种情况，useLayoutEffect 应该只在专门在客户端渲染的组件中使用。在NoSsr中 在ForwardRef(ButtonBase)中 在WithStyles(ForwardRef(ButtonBase))中 在ForwardRef(Fab)中 在WithStyles(ForwardRef(Fab))中 (at src/index.js:9)

虽然我没有使用 useLayoutEffect。

这是一个简单的例子：

import React from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from 'react-dom/server';
import Fab from '@material-ui/core/Fab';

function App() {
  return ReactDOMServer.renderToString(
    <Fab size="small" variant="extended">
      Test
    </Fab>);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在线： https: //codesandbox.io/s/material-ui-rendertostring-tc90b

为什么会抛出这个错误？这段代码有什么问题？是否有其他方法可以从 …

我想在地图外有一个按钮，将视图更改为另一个坐标。

有没有办法让 mapContainer 实例调用它们的函数？或者我该如何实现该功能？

我试图通过使用 ref 来获取它，但它不起作用。这是我当前的代码

const zoom = 13;

function Map({ regionCoord, regionName }) {

    const mapRef = useRef();

    function handleFlyToClick() {
      // This don't work
      // const map = mapRef.current.leafletElement 
      // map.flyTo(regionCoord, zoom)
    }

 return (   
        <React.Fragment>
            <Grid container >
                <Grid item xs={10}>
                    {regionCoord && <MapContainer
                        ref={mapRef}                     
                        center={[50,50]} 
                        zoom={zoom}                    
                        >
                        <TileLayer
                            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />            
   
                        <Marker position={regionCoord}>
                          <Popup>{regionName}</Popup>
                        </Marker>        
                    </MapContainer>}                               
                </Grid>
                <Grid item xs={2}>
                    <button onClick={handleFlyToClick}>Fly To</button>
                </Grid>
            </Grid>
        </React.Fragment>  
    )
    
}

export default Map …

我正在用反应和反应传单制作地图。React Leaflet 有一个名为 FeatureGroup 的类，我想在第一次渲染时使用 React 中的 useRef 钩子访问该类，然后访问 useEffect 函数中的值。然而，在初始渲染时，ref 未定义（markerRef.current 返回 null）。仅当我对代码进行任何类型的更改、保存并重新加载 React 应用程序后，它才会获取值

你能告诉我我做错了什么以及如何使markerRef.current在初始渲染上不为空吗？

请在下面找到该组件的缩写代码：

import {useRef} from 'react';
import {FeatureGroup, //... } from 'react-leaflet';

const MapView = ({breweries}) => {
  const markerGroupRef = useRef(null);
  //...
  useEffect(() => {
    if(markerGroupRef.current) {
      //here I want to access a method called getBounds() which is in the markerGroupRef.current object 
      //but markerGroupRef.current has null value and so it doesn't execute
      //when making a save change and react app reloads it has …

我正在开发一个 React 应用程序，并且正在尝试实现一个支持离线下载地图图块的 Leaflet 地图。为此，我想到使用 leaflet.offline （https://github.com/allartk/leaflet.offline），但我不确定如何在 React 中使用这个库？

如何将 leaflet.offline 与 React 结合使用，或者是否有任何特定于 React 的库支持使用 Leaflet 离线下载地图图块？

谢谢你的帮助！

我正在尝试将一个简单的 Leaflet-React 地图渲染到屏幕上。

但是瓷砖都弄乱了，或者没有渲染。看一下截图：

我尝试使用默认的 OpenStreetMaps URL 以及 MapBox URL，但都给出了相同的结果，所以我认为这不是磁贴服务器问题。虽然我可能是错的。

这是我的代码：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Map, TileLayer, Marker, Popup} from 'react-leaflet'

class FieldMap extends Component {
    state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 1,
        zoomOffset: 1
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <div style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"
            }}>
                <Map style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}>
                    <TileLayer
                        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                        url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/>
                    <Marker …

我有一个React-Leaflet地图，我正在渲染div里面。

出于某种原因，与 div 的内容交互会导致下面的地图做出响应（例如：双击将缩放地图，拖动将平移地图） - 即使我正在调用e.stopPropagation()附加到 div 的处理程序。

据我了解，调用stopPropagation()应该阻止 DOM 事件到达地图本身。

为什么看起来stopPropagation()被忽略了？

我怎样才能在地图内渲染一个 div而不让它的事件冒泡到地图本身？

这是一个显示问题的示例代码笔。

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

const MyMap = props => (
  <Map zoom={13} center={[51.505, -0.09]}>
    <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />

    {/* 
          HOW do I get this div to NOT pass it's events down to the map?!?! 
          Why does e.stopPropagation() appear to not work?
    */}
    <div 
      id="zone"
      onClick={e => e.stopPropagation()}
      onMouseDown={e …

我正在尝试使用钩子获取对传单对象的引用，因此我可以查询不同事件（如 Map.getBoundaries()）上的新地图边界。我很新reac-leaflet，这种方法可能完全错误，但这是我现在所拥有的......

我想要做的是获取每个moveend事件的地图边界，如果这有帮助的话......