Wie zeigen Sie mehrere Markierungen auf Google Map in react js?

Question

Ich verwende React js. Hier ist mein Code -

import React, {PropTypes} from 'react'; 
import {GoogleMapLoader, GoogleMap, Marker} from 'react-google-maps'; 
import _ from 'lodash'; 

class MapContainer extends React.Component { 

    render() { 
    return (
     <section className="searchInput-MapScreen"> 
     <GoogleMapLoader 
      containerElement={ 
      <div 
       style={{ 
       height: `100%` 
       }} 
      /> 
      } 
      googleMapElement={ 
      <GoogleMap 
       defaultZoom={10} 
       //defaultCenter={{ lat: latitude, lng: longitude }} 
      > 
      {_.map(this.props.areas, (a, i) => { 
       let lat = parseFloat(a.lat.replace('"','').replace('"','')); 
       let lon = parseFloat(a.lon.replace('"','').replace('"','')); 
       console.log(lat) 
       console.log(lon) 
       return (
       <Marker key={i} 
        position={{ lat : lat, lng : lon }} 
        defaultAnimation={2} 
       /> 
      ) 
      })} 
      </GoogleMap> 
      } 
     /> 
     </section> 
    ) 
    } 
} 

MapContainer.propTypes = { 
    areas: PropTypes.array 
} 

export default MapContainer 

Die Google Map wird nicht angezeigt. Die Breiten- und Längengrade werden angezeigt. Sie können die im Code hinzugefügte Konsole sehen. Aber trotzdem erscheint die Karte nicht auf der Seite.

Answer 1

Ich konnte das selbst beheben.

Um der anderen willen, hier ist die Lösung für das oben genannte Problem.

defaultCenter={{ lat: latitude, lng: longitude }}

Dies wurde in dem obigen Code kommentiert, die nicht wie dieses die Karte zeigen erforderlich sein sollte.

Längen- und Breitengrad für die Standardmitte können entsprechend hartcodiert werden.

Der neue Code wird -

import React, {PropTypes} from 'react'; 
    import {GoogleMapLoader, GoogleMap, Marker} from 'react-google-maps'; 
    import _ from 'lodash'; 

    class MapContainer extends React.Component { 

     render() { 
     return (
      <section className="searchInput-MapScreen"> 
      <GoogleMapLoader 
       containerElement={ 
       <div 
        style={{ 
        height: `100%` 
        }} 
       /> 
       } 
       googleMapElement={ 
       <GoogleMap 
        defaultZoom={10} 
        defaultCenter={{ lat: <somevalue>, lng: <somevalue>}} 
       > 
       {_.map(this.props.areas, (a, i) => { 
        let lat = parseFloat(a.lat.replace('"','').replace('"','')); 
        let lon = parseFloat(a.lon.replace('"','').replace('"','')); 
        console.log(lat) 
        console.log(lon) 
        return (
        <Marker key={i} 
         position={{ lat : lat, lng : lon }} 
         defaultAnimation={2} 
        /> 
       ) 
       })} 
       </GoogleMap> 
       } 
      /> 
      </section> 
     ) 
     } 
    } 

    MapContainer.propTypes = { 
     areas: PropTypes.array 
    } 

    export default MapContainer 

Um mehr Informationen zu diesem hinzufügen, ich wurde mit dieser Komponente, um die Bereiche mit der Postleitzahl zu suchen. Wenn die Postleitzahl 2000 ist, sollte sie alle Bereiche auf der Karte mit dieser Postleitzahl markieren.

Hoffe, das hilft jemand anderem!

Danke