反应本地动态弹出并显示服务器中的地图标记 [英] React native dynamically pop and show map markers from server

问题描述

我需要从服务器获取地图位置更改上的标记位置，并将此新标记位置反映在地图上.如果我将一些标记置于状态，则它会显示标记，但是不会动态显示任何标记.我在控制台上没有收到任何错误或警告.

I need to get marker positions on map position change from the server and reflect this new marker positions on the map. If I put some markers in the state it shows the markers however it doesn't show any marker dynamically. I don't get any error or warnings on the console.

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

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文件

JSON File that is returned by the server

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

推荐答案

正在发生的一些问题是有问题的，应该给您带来错误.问题在于，由于您正在使用onRegionChangeComplete，因此没有一个被触发，但是正确的属性只是onRegionChange.此时的错误可能会帮助您解决问题.

There are a few things going on there that are a problem and should be giving you an error. The problem is that none of those are being triggered because you're using onRegionChangeComplete, but the correct property is just onRegionChange. The errors at that point may get you the rest of the way.

如果您遇到了错误，仍然不确定要去哪里，请随时要求更多的说明.

If you get to a point where you've gone through the errors and are still not sure where to go, feel free to ask for more clarification.

这篇关于反应本地动态弹出并显示服务器中的地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！