Google maps 反应本机映射-从服务器获取标记
我正在尝试从服务器动态获取附近的标记,并在地图上打印,但没有成功。当我更新地图位置时,我得到以下警告。当我拖动地图时,预期的行为是在地图上打印标记,但它不显示任何动态获取的标记,而是显示警告 20:27:15:[未处理的承诺拒绝:TypeError:undefined不是对象(评估'object[key]')] -node_modules/immutability helper/index.js:81:44 in -更新中的node_modules/immutability helper/index.js:73:29 - ... 框架内部再增加16个烟囱框架 App.js(主文件)Google maps 反应本机映射-从服务器获取标记,google-maps,react-native,immutability,Google Maps,React Native,Immutability,我正在尝试从服务器动态获取附近的标记,并在地图上打印,但没有成功。当我更新地图位置时,我得到以下警告。当我拖动地图时,预期的行为是在地图上打印标记,但它不显示任何动态获取的标记,而是显示警告 20:27:15:[未处理的承诺拒绝:TypeError:undefined不是对象(评估'object[key]')] -node_modules/immutability helper/index.js:81:44 in -更新中的node_modules/immutability helper/ind
我不确定更新功能是否正确,但这里您正在分配未定义的值: 纬度:{latitude:{$set:responseJson.latitude},经度:{$set:responseJson.latitude}
responseJson作为孩子没有纬度和经度。他们有LatLng我不知道
$push
但您需要将其设置为键:{$push:I}
?谢谢,我现在更改了它,它给出了另一个警告。现在我将创建另一个问题。“未处理的承诺拒绝(id:0):不变违反:update():预期$push的目标为数组;未定义。编辑问题以添加我编辑的问题也做了一个小更改。我明白了。谢谢。我将在晚上回家时再试。
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>
);
}
}
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,
};
[{"latlng":{"latitude":"40.3565","longitude":"27.9774"}},{"latlng":{"latitude":"40.3471","longitude":"27.9598"}},{"latlng":{"latitude":"40","longitude":"27.9708"}}]