Question

很久以来，他一直坚持使用此工具。请帮我解决问题。尝试在地图上加载多个标记，但由于某种原因，它并未加载所有标记。我正在使用tomchentw https://tomchentw.github.io/react-google-maps/#introduction

的Google Maps Api包装器中的React

它只会加载第一个标记，而不会显示任何错误。我认为这可能与标记的迭代有关，但似乎找不到缺陷。

.App

render() {
return (
  <div>
    <Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
    />

  </div>
);
}

。地图

import React from 'react';
import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps";
import { compose, withProps, withStateHandlers } from 'recompose';

const MapWithPlaces = compose(
withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: '100vh', width: '100%' }} />,
    mapElement: <div style={{ height: '100%' }} />,
}),
withStateHandlers(() => ({
    isOpen: false,
}), {
        onToggleOpen: ({ isOpen }) => () => ({
            isOpen: !isOpen,
        })
    }),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
    defaultZoom={props.zoom}
    defaultCenter={props.center}
    defaultOptions={{ ... }}>
    {props.places && props.places.map((place, i) => {
        let lat = parseFloat(place[i].latitude, 10);
        let lng = parseFloat(place[i].longitude, 10)

        return (
            <Marker
                id={place[i].id}
                key={place[i].id}
                position={{ lat: lat, lng: lng }}
                title="Click to zoom"
                onClick={() => { props.onToggleOpen({ i }); }}
            >
                {props.isOpen[{ i }] &&

                    <InfoWindow onCloseClick={props.onToggleOpen({ i })}>
                        <div>
                            {place.name}
                        </div>
                    </InfoWindow>
                }
            </Marker>
        )
    })}

</GoogleMap>
);

const customStyled = require('../mapStyle.json');

export default MapWithPlaces;

.place.json

[
{
    "id": 1,
    "name": "Park Slope",
    "latitude": "40.6710729",
    "longitude": "-73.9988001"
},
{
    "id": 2,
    "name": "Bushwick",
    "latitude": "40.6942861",
    "longitude": "-73.9389312"
},
{
    "id": 3,
    "name": "East New York",
    "latitude": "40.6577799",
    "longitude": "-73.9147716"
},
]

谢谢。

Answer 1

绑定places属性存在一些问题

<Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
      ^^^^^^^^^^^^^^
    />

1）似乎是一个错字，您可能是说places属性名而不是city，对吧？

2）和{[places]}表达式评估的另一个要点，是将places属性设置为nested array（这就是标记仅被渲染一次的原因）：

[
    [
        {
            "id": 1,
            "name": "Park Slope",
            "latitude": "40.6710729",
            "longitude": "-73.9988001"
        },
        {
            "id": 2,
            "name": "Bushwick",
            "latitude": "40.6942861",
            "longitude": "-73.9389312"
        },
        {
            "id": 3,
            "name": "East New York",
            "latitude": "40.6577799",
            "longitude": "-73.9147716"
        }
    ]
]

这里有一个working demo，进行了一些更改。

如何在地图上加载多个标记react-google-maps

1 个答案: