Динамически выводить маркеры с помощью GoogleMapReact Ionic - PullRequest
Новая
       8

Динамически выводить маркеры с помощью GoogleMapReact Ionic

0 голосов
/ 01 апреля 2020

Я столкнулся с проблемой при попытке динамического отображения маркеров на основе координат из файла json. Ниже я прокомментировал то, с чем я играл до маркера. Я новичок в React и использую Ioni c React для создания кроссплатформенного приложения. Я пробовал цикл до компонента Marker, но, похоже, застрял только на начальных этапах. В файле json каждая станция имеет координаты широты и долготы. Вот мой компонент до сих пор: 

import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './Marker';
import axios from 'axios';


const SimpleMap = (props: any) => {
  const sendGetRequest = () => {

   return axios({
     url: 'https://tor.publicbikesystem.net/ube/gbfs/v1/en/station_information',
     method: 'get'
   }).then(response => {

  console.log(response);
  return response.data;
    })
  };

const getMapOptions = (maps: any) => {
return {
  disableDefaultUI: true,
  mapTypeControl: true,
  streetViewControl: true,
  styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'on' }] }],
 };
};

const [items, setItems] = React.useState([]);

React.useEffect(() => {

sendGetRequest().then(data => setItems(data.stations));

}, []); 

const [center, setCenter] = useState({lat: 11.0168, lng: 76.9558 });
const [zoom, setZoom] = useState(11);
const [activeMarker, setActiveMarker] = useState(null);
return (

    <div style={{ height: '100vh', width: '100%' }}>
    <GoogleMapReact
      bootstrapURLKeys={{ key: KEY_ID }}
      defaultCenter={center}
      defaultZoom={zoom}
      options={getMapOptions}
    >
  //******
  //******think i have to do something like this 
 //******{this.state.markers.map((marker, i) =>{
    //******      return(
     //******       <AnyReactComponent
       //******       lat={marker.lat}
       //******       lng={marker.lng}
        //******      img_src={marker.img_src}
        //******    />

        //******  )
        //******})}
      <Marker
        lat={11.0168}
        lng={76.9558}
        name="My Marker"
        color="blue"
      />
    </GoogleMapReact>
  </div>
  );
}

export default SimpleMap;
...