我正在尝试从网站API提取数据到我的react / leaflet应用程序中。到目前为止,我已经在控制台中返回了数据:
fetch('https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50')
.then(res => res.json())
.then(members => {
console.log(members);
this.setState({
Nearbymems : members.Nearbymems
});
});
然后我尝试使用以下方法在地图上将这些成员显示为标记:
{this.state.NearbyMems.map(members => (
<Marker
position={[members.location.latitude, members.location.longitude]}
icon={myIcon3} >
<Popup>
<em>{members.name}, </em>
{members.bio} {'\n'}
<PopupModal initialModalState={true}/>
</Popup>
</Marker>
))}
这不会产生任何错误,而我的应用正在编译且正在运行且没有错误,但没有显示任何标记。 这是显示返回的JSON数据的示例,例如:
{
"latlon": "53,-6",
"radius": "1000",
"format": "json",
"perpage": "50",
"pages": 108,
"page": 1,
"total": 5391,
"members": [
{
"id": 85639,
"name": "____",
"url": "https://thesession.org/members/85639",
"location": {
"latitude": "____",
"longitude": "_____"
},
"date": "",
"bio": ""
},
编辑:
myIcon3的代码:
var myIcon3 = L.icon({
iconUrl: 'http://www.libpng.org/pub/png/img_png/pengbrew_160x160.png',
iconSize: [25, 51],
iconAnchor: [12.5, 51],
popupAnchor: [0, -51],
});
获取的输出:
Object
format: "json"
latlon: "53,-6"
members: (50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
page: 1
pages: 108
perpage: "50"
radius: "1000"
total : 5391
__proto__: Object
答案 0 :(得分:0)
解决我自己的问题。我使用的是名为 IPAPI 的IP查找程序,它要求我使用以下格式设置其经纬度:
lng: location.longitude
lat: location.latitude
此功能是在用户拒绝Google内置的location请求时捕获用户IP。此后,我删除了此功能,现在我的fetch语句返回了正确的数据。