阵营，传单，电源位置从国家

我有以下代码：阵营，传单，电源位置从国家

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='&copy; <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> 
    ) 
}

该地图正确显示，除非我尝试使用坐标从我的状态。国家的输出是这样的：

["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像let position = [latVal, lngVal]可变我得到一个错误，说我的latVal是null，但我可以在console.log功能render()两个值（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);

但仍没有运气。

来源

2017-07-18 Vadim Novozhilov

数组你是询问如何将值提取出的输出或者是你问如何使用Map组件的“position”属性？ – Teedub

@Teedub我认为它更多的是从给定的数组中获取值，并将它们用在'position'属性 –

的位置应该是[lat，lng]而不是数组数组。你是否试图从数组中的值列表创建多个标记？ –

这里是在阵列正确的地图，应该给你想要你需要 - 对来自两个国家

this.state.lat.map((value,index)=>[value,this.state.lon[index]])

来源

2017-07-18 20:27:43

Alex，感谢您致力于帮助我的时间，我非常感谢！这个'map'联合体适用于我，我正在实施我的自定义标记。 –

阵营，传单，电源位置从国家

回答

相关问题