React Native Map - 从服务器获取标记答案

【问题标题】：React Native Map - Getting markers from the serverReact Native Map - 从服务器获取标记
【发布时间】：2018-09-29 00:40:47
【问题描述】：

我正在尝试从服务器动态获取附近的标记并在地图上打印但没有成功。当我更新地图位置时，我收到以下警告。当我拖动地图时，预期的行为是在地图上打印标记，但它不显示任何动态获取的标记，而是显示警告。

20:27:15: [未处理的承诺拒绝：TypeError: undefined is not an object (evalating 'object[key]')] - node_modules/immutability-helper/index.js:81:44 in - node_modules/immutability-helper/index.js:73:29 更新 - ... 来自框架内部的另外 16 个堆栈帧

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, 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: [
      {
        key: 1,
        latlng: {
          latitude: 40.3565,
          longitude: 27.9774
        }
      }
    ]
  };
  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) {
       fetch('https://isg.info.tr/query_maps.php' + '?latitude=' + region.latitude + '&longitude=' + region.longitude , {method: 'GET'})
        .then((response) => response.json())
        .then((responseJson) => {
          var newlatlng;
          for (i = 0 ; i< responseJson.length; i++) {
            newlatlng = update(this.state, {markers: { 
                                                        key: { $set: i }, 
                                                        latlng: { latitude: { $set: responseJson.latitude },
                                                        longitude: { $set:  responseJson.longitude  } 
                                                      } 
                                            }        
                                          });
            this.setState({markers});
          }
        })
   };
   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={index} coordinate={marker.latlng} title={'marker.title'} />
            ))}
          </MapView>
      </View>
      );
   }
}
Fetchdata.propTypes = {
  provider: ProviderPropType,
};

从服务器获取Jsondata：

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

【问题讨论】：

我不知道$push，但您需要将其设置为key: { $push: i } 吗？
谢谢我改变了它现在它给出了另一个警告。现在我将创建另一个问题。 “未处理的 Promise Rejection (id:0): Invariant Violation:update():expected target of $push to be an array; got undefined.
编辑问题以添加
我编辑了这个问题也做了一个小改动。

标签： google-maps react-native immutability

【解决方案1】：

我不确定更新功能，但在这里您分配了未定义的值：

latlng: { latitude: { $set: responseJson.latitude }, longitude: { $set: responseJson.longitude }

responseJson 没有小时候的经纬度。他们有LatLng

【讨论】：

我明白了。谢谢。我晚上回家试试。