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

问题描述

我对 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 命令写出了我期望的所有内容（不要担心经度处的拼写错误，数据库中就是这样）。我觉得map方法不行或者她内心的东西，但我似乎想不通。

解决方法

在您的 {} 中使用花括号 <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;