Question

很抱歉提出类似问题，但建议不要更改原始问题。所以我就略有不同的问题提出另一个问题。这次我无法在ComponentDidMount上打印标记，虽然看起来很正常。没有错误或警告，但标记无法打印在地图上。

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert,TouchableOpacity, AppRegistry} from 'react-native'

import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import axios from 'axios';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
class Fetchdata extends Component {
  constructor (props) {
    super(props);
  };
  state = {
    latitude: 40.35,
    longitude: 27.95,
    markers: []
  };
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
      });
    },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );

    axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
    .then(response => this.setState(response))
   }
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                initialRegion={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            >
            {this.state.markers.map((marker, index) => (
              <MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
            ))}
          </MapView>
      </View>
      );
   }
}
Fetchdata.propTypes = {
  provider: ProviderPropType,
};
export default Fetchdata;

返回的JSON文件

[{
    "markers": {
        "index": "1",
        "latlng": {
            "latitude": "40.3565",
            "longitude": "27.9774"
        }
    }
}, {
    "markers": {
        "index": "3",
        "latlng": {
            "latitude": "40.3471",
            "longitude": "27.9598"
        }
    }
}, {
    "markers": {
        "index": "2",
        "latlng": {
            "latitude": "40",
            "longitude": "27.9708"
        }
    }
}]

Answer 1

你的问题从这里开始：

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))

您的响应是一个数组，您需要将其设置为正确的状态对象，如此

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response}))

这里存在第二个问题，那就是您从响应中获得的数据。每个数组项都包含一个完全没必要的“标记”对象，这种对象使数据结构复杂化。您可以通过处理从API调用获得的数据来解决此问题，然后再将它们发送到以下状态：

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response.map(marker)=> {
    return marker.markers
}}))

Answer 2

在@needsleep的更正后我做了一些小改动。此外，我必须将lat和lng信息更改为在服务器端浮动。最后一个状态如下：

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert, AppRegistry} from 'react-native'
import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import update from 'immutability-helper';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
export default class Fetchdata extends Component {
  constructor (props) {
    super(props);
  };
  state = {
    latitude: 40.3565,
    longitude: 27.9774,
    markers: []
  };
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
      });
    },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
   }
   onRegionChange (region) {
    return fetch('http://isg.info.tr/query_maps.php' + '?latitude=' + region.latitude + '&longitude=' + region.longitude)
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({markers: responseJson });

    })
    .catch((error) =>{
      console.error('hata'+ error);
    });

  }
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                initialRegion={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            onRegionChange={this.onRegionChange.bind(this)}
            >
            {this.state.markers.map((marker, index) => (
              <MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
            ))}

          </MapView>
      </View>
      );
   }
}
Fetchdata.propTypes = {
  provider: ProviderPropType,
};

不显示从服务器获取的标记

2 个答案: