gpt4 book ai didi

reactjs - react 传单 : Add markers dynamically

转载 作者:行者123 更新时间:2023-12-03 13:21:21 26 4
gpt4 key购买 nike

如何动态添加标记到React-Leaflet map ?

我想在用户单击 map 时添加新标记。我无法让它工作。

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>

)
}
}

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

A)

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

它引发错误:

 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} />

它不会添加任何新标记,也不会引发任何错误。

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

最佳答案

为了充分利用 react-leaflet,您应该思考如何以 React 生命周期处理两次点击的方式设计 map 渲染和标记的显示。 React-leaflet 可以为您处理几乎所有的传单繁琐工作。

您应该使用组件的状态或属性来跟踪组件正在显示的标记。因此,不要手动调用 L.marker ,您应该简单地渲染一个新的 <Marker>组件。

这是点击 map 后添加标记的 react 方式:

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>
);
}
}

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

关于reactjs - react 传单 : Add markers dynamically,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42835692/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com