Question

当我按标记时，我试图在地图上弹出视图。我的代码如下。

这是我的渲染方法

return (
      <View styles={styles.container}>
        {this.state.error && (
          <Text style={styles.errorText}>Error: {this.state.error}</Text>
        )}
        {this.state.mapReady && (
          <MapView
            provider={PROVIDER_GOOGLE}
            ref={map => (this.map = map)}
            showsUserLocation
            style={styles.userMap}
            initialRegion={this.state.initialRegion}
          >
            {this.renderVendorMarkers()}
          </MapView>
        )}
      </View>
    );
  }
}

到目前为止，这很好。我的地图在模拟器屏幕上呈现并显示当前用户位置（基于访问他们在设备上的位置。）mapReady只是当用户允许使用其位置数据时我将其设置为true的属性。

this.renderVendorMarkers是一种执行以下操作的方法：

renderVendorMarkers = () => {
    const { vendorData } = this.state;
    if (vendorData) {
      return (
        <View>
          {vendorData.map((vendor, idx) => {
            return (<Marker
            key={idx}
            ref={ref => (this.state.markers[idx] = ref)}
            onPress={() => this.onMarkerPress(marker, idx)}
            coordinate={{
              latitude: marker.coordinates.lat,
              longitude: marker.coordinates.lng
            }}
          >
            <Callout>
              <Text>{marker.VendorName}</Text>
            </Callout>
          </Marker>
        );
      })}
    </View>
  );
}

};

在这种方法中，我采用vendorData，它是一些虚假的卖方对象数组，具有其坐标并在每个卖方中循环（使用.map）。然后，我将生成地图上的所有标记。这一切都按预期工作。我的地图在应用程序屏幕上呈现，所有标记都显示在地图上。这就是我卡住的地方。

在此方法中的标记组件中，我使用onPress并将其链接到另一个方法。

   onMarkerPress = (location, index) => {
    return (
      <View style={styles.vendorContainer}>
        <Text>Vendor Data:{location.VendorName}</Text>
      </View>
    );
  };

这里应该发生的是，每当我按一个标记时，应该在地图底部附近显示一个带有供应商名称的框。但是，当我单击标记时，什么都没有显示。我没有收到任何错误，所以我不知道此代码是否不正确或其样式问题。我的风格如下：

const { width, height } = Dimensions.get("screen");

const styles = StyleSheet.create({
  container: { flex: 1 },
  vendorContainer: {
    flex: 1,
    height: 100,
    width: 200,
    position: "absolute",
    backgroundColor: "white"
  },
  userMap: { height: height },

在地图视图中使用Marker OnPress时视图未呈现

0 个答案: