reactjs - 标记组件未在 React JS 中的 Google 地图上显示

Question

我对 React JS 比较陌生。但是，我似乎无法弄清楚为什么我的 GoogleMap 组件上没有显示标记。

const MyMapComponent = withGoogleMap((props) => {
            return (
                <GoogleMap
                    defaultZoom={8}
                    defaultCenter={{lat: 43.856, lng: 18.413}}
                >
                    {
                    tasks.map(task => {
                        let trackers = task.userTrackers;
                        console.log(trackers);
                        trackers.map(tracker => (
                            <Marker
                                //key={tracker.id}
                                position={{
                                    lat: tracker.locationLatitude,
                                    lng: tracker.locationLongitutde
                                }}
                                icon={{url: yellowMarkerURL}}
                            >
                            </Marker>
                        ))
                    
                    })
                    }
                </GoogleMap>
            )
        }
    );

“tasks”是我从数据库中获取的一个数组，它包含一个数组“userTrackers”。我在这段代码中使用的 console.log 命令会写出我所期望的所有内容（不要担心经度处的拼写错误，这就是它在数据库中的样子）。我认为地图方法不正确或她内部的东西，但我似乎无法弄清楚是什么。

Answer 1

将花括号{}与<Marker>. tasks.map(task => {...}它甚至没有显示任何错误。这似乎是图书馆本身的问题。一种解决方法是在外部使用()和声明任何其他内容。例如：

链接：https ://stackblitz.com/edit/sample-simple-map-withjsonfile-g1lpuy

    import React, { Component } from "react";
    import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
    import data from "./data.json";
    
    function Map() {
      const GoogleMapExample = withGoogleMap(props => (
        <GoogleMap
          defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
          defaultZoom={13}
        >
          {data.map((location, i) => (
            //if this is contained with {}, markers won't show up
            <Marker
              key={i + 1}
              position={{ lat: location.lat, lng: location.lng }}
            />
          ))}
        </GoogleMap>
      ));
    
      return (
        <div>
          <GoogleMapExample
            containerElement={<div style={{ height: `500px`, width: "500px" }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
      );
    }
    
    export default Map;