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

【问题标题】：Marker components not showing on Google Maps in React JS标记组件未显示在 React JS 中的 Google 地图上
【发布时间】：2021-07-12 07:07:45
【问题描述】：

我对 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方法不行或者她里面有什么东西，但是我好像搞不明白是什么。

【问题讨论】：

标签： reactjs google-maps google-maps-markers google-map-react

【解决方案1】：

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

链接：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;

【讨论】：