如何在 React Native 地图上显示 Json 标记？

Question

我一直在思考如何映射 JSON 以响应原生地图。我尝试了几种方法来映射每个坐标来自 API:

的 JSON 文件

{
    "request_time": "2019-09-28T22:13:25+01:00",
    "source": "NaPTAN",
    "acknowledgements": "Contains DfT NaPTAN bus stops data",
    "member": [
        {
            "type": "bus_stop",
            "name": "Western Avenue - SW-bound",
            "description": "Buckingham",
            "latitude": 52.00437,
            "longitude": -0.98989,
            "accuracy": 20,
            "atcocode": "040000004581",
            "distance": 846.0
        },
        {
            "type": "bus_stop",
            "name": "Overn Avenue - NE-bound",
            "description": "Buckingham",
            "latitude": 52.00378,
            "longitude": -0.98884,
            "accuracy": 20,
            "atcocode": "040000002388",
            "distance": 872.0
        }
    ]
}

在此 MapView 部分中，您将看到我正在使用的地图方法，由于某种原因没有显示标记。我得到一个 TypeError: this.state.markers.map is not a function:

          <MapView
              style={styles.map}
              showsUserLocation={true}
              initialRegion={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitude,
                  latitudeDelta: 0.0462,
                  longitudeDelta: 0.0261,
          }}
          >

              {this.state.markers.map(marker => (
                  <Marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
              ))}

          </MapView>
    );
  }
}

Answer 1

this.state.markers.map is not a function 表示您正尝试对非数组变量使用 map 函数，在本例中为 this.state.markers。

我认为当 react native component 第一次渲染时 this.state.markers 是 undefined 否则请仔细检查 this.state.markers 是否是 array 而不是 object .

在 undefined 的情况下，您还可以在渲染前进行检查。

this.state.markers && this.state.markers.map(marker => ( 
                 <Marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
              ))}

Answer 2

根据您的实际代码，进行以下更改

 getBusStops = () => {
    try {
        axios.get(`http://transportapi.com/v3/uk/places.json?lat=${this.state.latitude}&lon=${this.state.longitude}&type=bus_stop&app_id=xxxx&app_key=xxxxxxxx`)
            .then(response => {
                this.setState({ markers: response.data.member});
                console.log(this.state.markers);
            })
            .catch(error => {
                console.log('Error fetching and parsing data', error);
            });
    } catch (error) {
        console.log(error);
    }
}

Answer 3

我遇到过同样的障碍，尝试将 this.state 分配给 const，然后使用 return() 语句停止函数的执行和 return 表达式的值。

// 见下面的例子。

          
 render() {

    const { markers } = this.state;


    return (
      <View style={styles.container}>
          
          <MapView
              style={styles.map}
              showsUserLocation={true}
              initialRegion={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitude,
                  latitudeDelta: 0.0462,
                  longitudeDelta: 0.0261,
          }}
          >

              {markers.map((marker, index ) => {
                return  (
                  <Marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
                  
                  )
              ))}

          </MapView>
    );
  }
}

此外，这里还有一个工作示例的源代码，附有标记如何展开的屏幕截图，供您参考。在这种情况下，它是一个自定义标记，它从 JSON.

呈现 item.price

json坐标的格式如下： “地理点：”55.263237,25.009765”，”

因此我编写了一个单独的函数来使其兼容。

但是您可以利用与您的数据结构最兼容的格式。

componentDidMount() {
        return fetch("www.yourUrlGoesHere.com/Json", { cache: "reload" })
            .then((response) => response.json())
            .then((responseJson) => {
                const mapArray = responseJson.properties.filter((item) => {
                  if (typeof(item.photo) !== 'undefined' && item.photo.length)
                      return item.property_type && item.property_type.toUpperCase();
                });
                this.setState({
                    isLoading: false,
                    dataSource: mapArray
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }


  render() {
    const { navigation } = this.props;
    const { dataSource } = this.state;


    return (
      <View style={styles.container}>

        <MapView initialRegion={{
          latitude: 25.2048,
          longitude: 55.2708,
          latitudeDelta: 0.122,
          longitudeDelta: 0.121
        }} style={styles.map}>
        {dataSource.map((item, index) => {
          return (
            <Marker
              key={`marker-${item.listing_ref}`}
              coordinate = {{
              latitude : item.geopoints.split(",")[1] - 0,
              longitude : item.geopoints.split(",")[0] - 0,
              }}
            >
        
                <View
                  style={[
                    styles.marker,
                    styles.shadow,

                  ]}
                >
                  <Text style={{marginTop: 10, marginBottom: 10,fontSize : 8, fontWeight:"bold", color : "black"}}>د.إ {numeral(item.price).format('0.0a')}</Text>

                </View>
       
            </Marker>
        );
      })}


        </MapView>

      </View>
    );
  }
}

如何在 React Native 地图上显示 Json 标记？

How do I diplay Json markers on react native maps?

reactjs

native

react-native-maps