Question

大家好，我坚持使用我的代码。

我能够显示来自geojson文件的多个标记。但我不知道如何单击标记以获取在geojson文件中设置的描述。

这就是我得到协调的方式，但是我不知道如何获取该位置的一些重要信息。

getLocations() {
    return fetch('http://media-panda.de/bp/whs.geojson')
    .then(response => response.json())
    .then(responseData => {
      let { region } = this.state;
      let { latitude, longitude } = region;

      let markers = responseData.features.map(feature =>  {
      let coords = feature.geometry.coordinates
        return {
          coordinate: {
            latitude: coords[1],
            longitude: coords[0],
          }
        }
      }).filter(marker => {
          let distance = this.calculateDistance(latitude, longitude, marker.coordinate.latitude, marker.coordinate.longitude);
          return distance <= this.state.value;
        });
      this.setState({
        markers: markers,
        loaded: true,
        });
    }).done();
 }

我的看法是：

<MapView.Animated
            style={styles.map}
            region={this.state.region}
            showsUserLocation={true}
          >
          {this.state.markers.map(marker => (
            <MapView.Marker
              key={Math.random()}
              coordinate={marker.coordinate}
              description={marker.description}
            />
            ))}
            <MapView.Circle
              center= {this.state.region}
              radius = { this.state.value }
              strokeWidth = { 1 }
              strokeColor = { '#1a66ff' }
              fillColor = { 'rgba(230,238,255,0.5)' }
            />
</MapView.Animated>

Answer 1

好的，我现在看到了您的问题，您正在尝试在getLocation函数之外设置描述，但是您仍在尝试使用仅存在于getLocations函数内部的responseData。
您已经在responseData数组中的每个项目上进行了映射，只需在此处添加标题和说明即可。

您可以轻松地在已有的函数中完成此操作；

let markers = responseData.features.map(feature =>  {
      let coords = feature.geometry.coordinates
      let name = feature.properties.Name
      let description = feature.properties.description
        return {
          coordinate: {
            latitude: coords[1],
            longitude: coords[0],
          },
          title: name,
          description: description
        }
      })

如何使用Reactnative在地图上显示标记的描述

1 个答案: