>

웹 사이트 API에서 반응/리플릿 애플리케이션으로 데이터를 가져 오려고합니다. 지금까지 콘솔에 데이터가 반환되었습니다.

   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

  • 답변 # 1

    내 자신의 질문을 해결하기 위해.IPAPI라는 IP 파인더를 사용하여 다음과 같이 위도/경도 형식을 지정해야했습니다.

    lng: location.longitude
    lat: location.latitude
    
    

    이 기능은 Google의 내장 위치 요청을 거부 한 경우 사용자 IP를 포착하는 것입니다. 그 이후로이 기능을 제거했으며 fetch 문은 이제 올바른 데이터를 반환합니다.

관련 자료

  • 이전 간단한 해시 함수 C에 단어를 삽입하는 방법
  • 다음 clio api - API 엔드 포인트에서 모든 필드를 반환