反应原生动态弹出并显示来自服务器的地图标记

Question

我需要从服务器获取地图位置变化的标记位置，并在地图上反映这个新的标记位置。如果我在状态中放置一些标记，它会显示标记，但它不会动态显示任何标记。我在控制台上没有收到任何错误或警告。

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch, Alert, AppRegistry } from 'react-native';
import MapView from 'react-native-maps';
import Fetchdata from './Fetchdata.js';

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default class MyScreen extends Component {
  render() {
    return (
      <View style ={styles.container}>
        <Fetchdata />
      </View>
    );
  }
}

FetchData.js

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

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('https://isg.info.tr/query_maps.php' + '?latitude=' + this.state.latitude + '&longitude=' + this.state.longitude , {method: 'GET'})
        .then((response) => response.json())
        .then((responseJson) => {
          const newState = Object.assign({}, this.state);
          newState.markers.latlng = responseJson;
          newState.latitude = region.latitude;
          newState.longitude = region.longitude;
          this.setState(newState);
          console.log(responseJson);
          })
   };
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                region={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            onRegionChangeComplete={this.onRegionChange.bind(this)}
            >
              {this.state.markers.map(marker => (
                <Marker
                  coordinate={marker.latlng}
                  title={"marker.title"}
                  description={"marker.description"}
                />
              ))}
          </MapView>
      </View>
      );
   }
}

服务器返回的JSON文件

[{"latitude":"40.3565","longitude":"27.9774"},{"latitude":"40.3471","longitude":"27.9598"},{"latitude":"40","longitude":"27.9708"}]

Answer 1

那里发生了一些问题，应该给你一个错误。问题是这些都没有被触发，因为您使用的是onRegionChangeComplete，但正确的属性只是onRegionChange。那时的错误可能会让你走完剩下的路。

如果您遇到错误但仍不确定该去哪里，请随时要求更多说明。