React Leaflet:动态添加标记 [英] React Leaflet: Add markers dynamically

问题描述

如何在React-Leaflet映射中动态添加标记?

我想在用户点击地图时添加新标记.而且我无法正常工作.

 从'react'导入React，{组件}从'react-dom'导入{render};从'react-leaflet-control'导入控件；从'react-leaflet'导入{Map，Marker，Popup，TileLayer，ZoomControl，ScaleControl};导入'./Points.scss'导出默认类PointsMap扩展了Component {状态= {纬度:50.2，lng:30.2，变焦:13}handleClick = (e) =>{this.addMarker();}addMarker(){//A)以下引发错误:var marker3 = L.marker([50.5，30.5]).addTo(this.refs.map);//B)具有以下标记的标记不会出现在地图上:const position2 = [50,30];<标记图= {this.refs.map} position = {position2}/>}使成为 () {const position = [this.state.lat, this.state.lng]返回 (< Map ref ='map'center = {position} zoom = {this.state.zoom} onClick = {this.handleClick}>< ZoomControl position ="topright"/>< ScaleControl position ="bottomright"/>< TileLayerattribution ='& copy< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的url ='http://{s} .tile.osm.org/{z}/{x}/{y} .png'/><标记图= {this.refs.map} position = {position}><弹出>< span>一个漂亮的CSS3弹出窗口.< br/>容易定制.</Popup></Marker></地图>)}} 

在 addMarker() 中，我尝试添加新标记.我尝试通过两种方式做到这一点:

A)

  var marker3 = L.marker([50.5，30.5]).addTo(this.refs.map); 

它引发错误:

 未捕获的TypeError:map.addLayer不是函数在NewClass.addTo(leaflet-src.js:3937)在PointsMap.addMarker(Points.js?12f5:54) 

B)

  const position2 = [50,30];<标记图= {this.refs.map} position = {position2}/> 

它不会添加任何新标记，也不会引发任何错误.

您是否知道如何动态添加/删除标记?

解决方案

为了充分利用 反应 -传单，您应该考虑如何设计以反应生命周期处理标记的点击和显示的方式呈现地图.React-leaflet可以为您处理几乎所有的传单工作.

您应该使用组件的状态或道具来跟踪组件正在显示的标记.因此，应该手动呈现一个新的< Marker> 组件，而不是手动调用 L.marker .

以下是点击地图后添加标记的反应方式:

 类SimpleExample扩展了React.Component {Constructor(){极好的();this.state = {标记:[[51.505，-0.09]]};}addMarker =(e)=>{const {markers} = this.statemarkers.push(e.latlng)this.setState({markers})}使成为() {返回 (<地图center = {[51.505，-0.09]}onClick = {this.addMarker}zoom = {13}>< TileLayerattribution ='& copy;< a href ="http://osm.org/copyright"> OpenStreetMap</a>贡献者的url ='http://{s} .tile.osm.org/{z}/{x}/{y} .png'/>{this.state.markers.map((position，idx)=><标记键= {`标记-$ {idx}`}位置= {位置}><弹出>< span>一个漂亮的CSS3弹出窗口.< br/>容易定制.</Popup></Marker>)}</地图>);}} 

这是一个jsfiddle: https://jsfiddle.net/q2v7t59h/413/

How to add markers dynamically to React-Leaflet maps?

I want to add new markers when user clicks on map. And I cannot get it work.

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 = [50,30];      
    <Marker map={this.refs.map} position={position2} />
  }

  render () {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map ref='map' center={position} zoom={this.state.zoom} onClick=    {this.handleClick} >
        <ZoomControl position="topright" />
        <ScaleControl position="bottomright" />
        <TileLayer
      attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
    />
    <Marker map={this.refs.map} position={position} >
      <Popup>
        <span>A pretty CSS3 popup. <br /> Easily customizable.</span>
      </Popup>
    </Marker>
  </Map>

    )
  }
}

In addMarker() I try to add new marker. I try to do that on 2 ways:

A)

 var marker3 = L.marker([50.5, 30.5]).addTo(this.refs.map);

It raises error:

 Uncaught TypeError: map.addLayer is not a function
     at NewClass.addTo (leaflet-src.js:3937)
     at PointsMap.addMarker (Points.js?12f5:54)

B)

const position2 = [50,30];      
    <Marker map={this.refs.map} position={position2} />

It doesn't add any new marker and it doesn't raise any error.

Do you have any idea how to add/remove markers dynamically?

解决方案

In order to get the most out of react-leaflet you should be thinking how you can design your map rendering in a way that the react lifecycle handles both the clicks and displaying of markers. React-leaflet handles almost all of the leaflet gruntwork for you.

You should be using the component's state or props to keep track of which markers the component is displaying. So, instead of manually calling L.marker, you should simply render a new <Marker> component.

Here is the react way to add a marker after clicking on the map:

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      markers: [[51.505, -0.09]]
    };
  }

  addMarker = (e) => {
    const {markers} = this.state
    markers.push(e.latlng)
    this.setState({markers})
  }

  render() {
    return (
      <Map 
        center={[51.505, -0.09]} 
        onClick={this.addMarker}
        zoom={13} 
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {this.state.markers.map((position, idx) => 
          <Marker key={`marker-${idx}`} position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
        )}
      </Map>
    );
  }
}

And here's a jsfiddle: https://jsfiddle.net/q2v7t59h/413/

这篇关于React Leaflet:动态添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！