我有以下代码:
import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
class App extends Component {
constructor(props) {
super(props);
this.state = {
coordinates: []
}
}
}
componentDidMount() {
// code to populate coordinates state
}
render() {
const position = [50, 100]
return (
<div className="container">
<Map center={position} zoom={13}>
<TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
</Popup>
</Marker>
</Map>
</div>
)
}
除非我尝试使用我所在州的坐标,否则该 map 将正确显示。状态的输出如下所示:
["86.765", "29.724999999999998", "0", "86.765", "29.724999999999998", "0"]
如何将此数据传递给 position
变量并使用它?
我现在尝试过的:
我定义了另外两个状态 - lat
和 lng
以及来自服务器的相应值,并对这些状态进行了 map
以提取所需的值,如下所示:
let latVal = this.state.lat.map(latItem => {
return latItem;
}
let lngVal = this.state.lng.map(lngItem => {
return lngItem;
}
但是当我将它传递给 position
(如 letposition = [latVal, lngVal]
变量)时,我收到一条错误消息,指出我的 latVal
是null
,但我可以在 render() 中
函数,在这种情况下,输出如下所示: console.log
两个值(latVal
和 lngVal
) 90.7250000000000128.105090.1649999999999929.555000000000003088.233
我认为这会导致错误,我不确定应该如何转换此数据以使其正常工作。
提前致谢!
UPD 我设法更改了 latVal 和 lngVal 输出,我的新代码如下所示:
let arr = []
let latVal = this.state.lat.map(k => {
arr.push(k + ' ');
})
let lngVal = this.state.lon.map(i => {
arr.push(i + ' ');
})
const position = [50, 100];
let newArr = position.concat(arr);
但还是没有运气。
最佳答案
这是一个正确的数组映射,应该可以满足您的需要 - 来自两个状态的对的数组
this.state.lat.map((value,index)=>[value,this.state.lon[index]])
关于javascript - React-Leaflet,从状态提供位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45173950/