Как добавить несколько маркеров из JSON в реакции, используя Google-карты-API? - PullRequest
Новая
       41

Как добавить несколько маркеров из JSON в реакции, используя Google-карты-API?

0 голосов
/ 01 июня 2019

Я хочу загрузить несколько маркеров из json на мою карту Google. Проблема в том, что моя функция карты отображает только последний элемент из json.

Я пытался изменить данные из json, я пытался добавить несколько маркеров с широтой и долготой, и мне не удалось их отобразить.

App.js 

function Map(){
const [selectedHospital,setSelectedHospital] = useState(null);

 return(

  <GoogleMap
  defaultZoom={15}
  defaultCenter={{ lat:46.774075,lng:23.607754}}
  >

      {hospitalData.places.map((h) =>(
          <Marker key={h.id}
                  position={{
                       lat:parseFloat(h.latitude),
                      lng:parseFloat(h.longitude)

                  }}
                  onClick={()=>{
                      setSelectedHospital(h);
                  }}
          />
      ))}

      {selectedHospital && (
          <InfoWindow
              position={{
                    lat:parseFloat(selectedHospital.latitude),
                  lng:parseFloat(selectedHospital.longitude)
              }}
          onCloseClick={() => {
              setSelectedHospital(null);
          }}
          >
              <h2>{selectedHospital.name}</h2>
          </InfoWindow>
      )}

  </GoogleMap>


)
}

const MapWrapped = withScriptjs(withGoogleMap((Map)));

    function App() {
  return (
      <div style={{ width: "75vw", height: "75vh" }}>

      <MapWrapped
        googleMapURL={"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&s&key=API_KEY&sensor=false"}
             loadingElement={<div style={{height: "100%"}} />}
            containerElement={<div style={{height: "100%"}} />}
            mapElement={<div style={{height: "100%"}} />}
    />
    </div>
  );
}

data.json 

{
  "places":
[
  {
"id": 1,
"name": "X",
"lat": 46.772171,
"lon": 23.602716
  },
  {
"id": 2,
"name": "Y",
"lat": 46.771040,
"lon": 23.605290
  },
  {
"id": 3,
"name": "Z",
"latitude": 46.769034,
"longitude": 23.602643
  }
]
}

Я должен изменить свой формат в json или метод карты?

...