Google Maps API 标记单击时出现匿名函数错误

Question

使用 Foursquare Google Maps API，我的目标是使用 Foursquare 提供的场地照片属性，如果场地的元数据中存在该属性，则在 Google Maps API 信息窗口中将其与场地名称一起呈现。 如果这两个属性中只有一个可用，我只想渲染可用的一个。如果未定义场地信息或两个属性都不可用，我只想在信息窗口中显示“无可用信息”。我尝试使用具有多个条件的条件运算符来执行此操作。

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

我不明白出了什么问题或如何解决它。如果'name'属性未定义，条件不应该让它回退到显示“无可用信息”吗？如果以前标记的信息显示正常，当我再次单击相同的标记时，它怎么会停止工作？

这是我在信息窗口中呈现的条件语句：

            <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得到场地信息，所以首先检查场地信息以确认它是否具有bestPhoto属性并检查第13行的props.markers以确认marker.id属性。

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

有时“该标记的照片正常显示”，我认为问题仍然是因为道具，照片属性有时是正确的，所以它工作正常。