Google maps 如何在react js中在Google地图上显示多个标记？

我正在使用React js。这是我的密码-

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

import React，{PropTypes}来自'React'；
从“react GoogleMaps”导入{GoogleMapLoader、GoogleMap、Marker}；
从“lodash”进口；
类MapContainer扩展了React.Component{
render（）{
返回(
{
设lat=parseFloat（a.lat.replace（“，”）.replace（“，”）；
设lon=parseFloat（a.lon.replace（“，”）.replace（“，”）；
控制台日志（lat）
控制台日志（lon）
返回(
)
})}
}
/>
)
}
}
MapContainer.propTypes={
区域：PropTypes.array
}
导出默认映射容器

---

谷歌地图没有出现。纬度和经度值即将出现，您可以在代码中看到添加的控制台。但是地图仍然没有出现在页面上

我自己能解决这个问题

为他人着想，以下是上述问题的解决方案

defaultCenter={{lat:纬度，lng:经度}

这是在上面的代码中注释的，不应该这样，因为这是显示地图所必需的

默认中心的纬度和经度可以相应地硬编码

新代码将被删除-

    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

import React，{PropTypes}来自'React'；
从“react GoogleMaps”导入{GoogleMapLoader、GoogleMap、Marker}；
从“lodash”进口；
类MapContainer扩展了React.Component{
render（）{
返回(
{
设lat=parseFloat（a.lat.replace（“，”）.replace（“，”）；
设lon=parseFloat（a.lon.replace（“，”）.replace（“，”）；
控制台日志（lat）
控制台日志（lon）
返回(
)
})}
}
/>
)
}
}
MapContainer.propTypes={
区域：PropTypes.array
}
导出默认映射容器

为了添加更多信息，我使用了这个组件来搜索使用邮政编码的区域。 如果邮政编码为2000，则应使用此邮政编码标记地图上的所有区域。

希望这能帮助别人

---

谢谢

请分享您如何使用此组件。如果有github或JSFiddle可用，也请分享。