Question

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

[{
     1: "prop1",
     2: "prop2",
     3: "prop3"
}, {...}]

Google地图未显示。纬度和经度值即将到来，您可以在代码中看到添加的控制台。但是地图仍未显示在页面上。

Answer 1

我能够自己解决这个问题。

为了他人，这里是解决上述问题的方法。

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

在上面的代码中对此进行了评论，但不应该显示该地图。

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

新代码将是 -

    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

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

希望这有助于其他人！

由于

如何在Google地图上显示反应js中的多个标记？

1 个答案: