Google 地图 API 标记点击上的匿名函数错误

Question

使用 Foursquare Google 地图 APIs，我的目标是使用 Foursquare 提供的场地照片属性，如果它在场地的元数据中可用，则将其渲染使用 Google 地图 API 信息 window 中的地点名称。如果两个属性中只有一个可用，我只想渲染可用的一个。如果 venueInfo 未定义或属性均不可用，我只想在信息 window 中显示 "No info available"。我尝试使用具有多个条件的条件运算符来执行此操作。

对于至少一个标记，有时会显示信息，但有时会出现这些错误。

我不明白出了什么问题或如何解决它。如果 'name' 属性未定义，条件不应该让它退回到显示 "No info available" 吗？如果标记的信息之前显示正常，当我再次点击同一个标记时它怎么会停止工作？

这是我在信息中呈现的条件语句 window:

            <InfoWindow>
        {venueInfo.name && venueInfo.bestPhoto ?
          <Fragment>
            <p>{venueInfo.name}</p>
            <img src={`${venueInfo.bestPhoto.prefix}200x200${venueInfo.bestPhoto.suffix}`}
            alt={"Venue"}
            />
          </Fragment> : venueInfo.name ? <p>{venueInfo.name}</p> : venueInfo && venueInfo.bestPhoto ? <img    src={`${venueInfo.bestPhoto.prefix}200x200${venueInfo.bestPhoto.suffix}`}
          // Screen readers already announce as image; don't need the word "image", "photo", etc.
          alt={"Venue"}
        /> : <p>No info available</p>}
      </InfoWindow>

GitHub 上的 full component code 作为参考。

Answer 1

您收到的错误是由于试图访问属性未定义的值引起的。

在您的情况下，这意味着 venueInfo 在尝试访问 venuInfo.bestPhoto 时实际上是未定义的。这会导致崩溃而不是条件运算符。

Answer 2

我认为你应该检查这个输出，你过滤prop.venues来获取venueInfo，所以首先检查venueInfo以确认它是否有bestPhoto的属性并检查props.markers第 13 行确认 marker.id 属性.

const venueInfo = props.venues.find(venue => venue.id === marker.id);

有时候"the photo for that marker displays normally"，我觉得还是道具的问题，照片属性有时候是对的，所以效果很好。

Google 地图 API 标记点击上的匿名函数错误

Anonymous function error on Google Maps API marker click

javascript

reactjs

google-maps-api-3

foursquare