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

Posted 2023-03-28

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

【英文标题】：Marker components not showing on Google Maps in React JS

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

【参考方案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;