如何使用 Reactnative 在地图上显示标记的描述 [英] How can I display description of a marker on the map with Reactnative

问题描述

嘿伙计们，我一直在坚持我的代码.

Hey guys I'm stucking on my code.

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

I'm able to display mulitple markers from a geojson file. but I dont know how to clickable the markers to get the description which is set in the geojson file.

这是我获取坐标的方式，但我不知道如何获取该位置的一些重要信息.

this is how I'm getting the coordinations but I don't have a clue how to fetch some important informations of this location.

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>

推荐答案

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

Ok, I see your problem now, you are trying to set description outside of the getLocation function but you are still trying to use responseData which only exists inside of the getLocations function.
You are already mapping over each item in the responseData array, just add the title and description here.

您可以在已有的函数中轻松完成；

You can easily do it inside the function you already have;

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 在地图上显示标记的描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！