Question

我正在尝试在地图上绘制各种经度和纬度的标记，并且由于某种原因，当应用加载时，我在屏幕上看不到任何标记。我什至没有得到任何错误，调试时也看不到任何东西，这是我的渲染方法的代码。

render() {
    return (
      <View style={styles.container}>
        {/* If user location data is allowed and retrieved */}
        {this.state.ready && (
          <MapView
            provider={PROVIDER_GOOGLE}
            showsUserLocation
            style={styles.map}
            region={{
              latitude: this.state.coords.lat,
              longitude: this.state.coords.lng,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421
            }}
          >
            {this.renderVendorMarkers()}
          </MapView>
        )}
      </View>
    );
  }
}

此状态。 ready是指我根据一些权限设置的布尔属性。

将呈现标记的方法是“ this.renderVendorMarkers（）” 该方法的代码如下：

renderVendorMarkers = () => {
    const { locations } = this.state;
    this.getCoordinates(locations).then(coords => {
      return (
        <View>
          {coords.map((coord, idx) => {
            return (
              <Marker
                key={idx}
                coordinate={{ latitude: coord.lat, longitude: coord.lng }}
              />
            );
          })}
        </View>
      );
    });
  };

此方法引用一个locations属性，该属性链接到具有用户完整地址的json文件，以及另一个名为getCoordinates的方法，该方法返回对应于google.maps api的promise数组以获取地址。

  getCoordinates = vendors => {
    const APIKEY = "myApiKey";     //Put a fake value here but in code, use a real API key
    const promises = vendors.map(async vendor => {
      const vendorID = vendor.VendorID;
      const fullAddress = `${vendor.VendorAddress},${vendor.VendorCity},${vendor.VendorState}`;
      try {
        const resp = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?address=${fullAddress}&key=${APIKEY}`
        );
        const respJson = await resp.json();
        return respJson.results[0].geometry.location;
      } catch (err) {
        console.log(err);
      }
    });
    return Promise.all(promises);
  };

基本上，我有一个带有用户地址列表的json文件。我想在地图上添加用户的经度和纬度标记。

我的getCoordinates方法以我想要的方式工作。似乎问题出在renderVendorMarkers方法上。当遍历坐标列表时（从getCoordinates方法检索），标记不呈现。如果您想让我进一步澄清，请告诉我。感谢帮助。

Answer 1

只需结束此操作，答案如下：

在template中调用getCoordinates方法。在这里设置状态。

componentDidMount()

在组件的render方法中，我称为this.getCoordinates(this.state.locations).then(coords => { this.setState({ vendorCoords: coords }); });。

renderVendorMarkers()

renderVendorMarker方法本身是：

{this.renderVendorMarkers()}

在.then中使用.map时，标记组件无法呈现标记

1 个答案: