反应本地地图 - 从服务器获取标记 [英] React Native Map - Getting markers from the server
问题描述
我试图从服务器动态获取附近的标记，并在地图上打印，但没有成功。当我更新地图位置时，我收到警告。当我拖动地图时，预期的行为是在地图上打印标记，但它不显示任何动态获取标记，但显示警告。
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（主文件） p>
从'react'导入React，{Component};
从'react-native'导入{Text，View，StyleSheet，Switch，Alert，AppRegistry};
从'react-native-maps'导入MapView;
从'./Fetchdata.js'中导入Fetchdata;
$ b $ const style = StyleSheet.create（{
container：{
... StyleSheet.absoluteFillObject，
height：400，
width：400，
justifyContent：'flex-end'，
alignItems：'center'，
}，
map：{
... StyleSheet.absoluteFillObject，
}，
}）;
导出默认类myScreen扩展组件{
render（）{
return（
< View style = {styles.container}>
< b< ; Fetchdata />
< / View>
）;
$ b fetchdata.js（获取服务器数据的文件）
$ b $ / p>
从'react'导入React，{Component}
导入{Text，View，StyleSheet，Switch，Alert，AppRegistry } from'react-native'
从'react-native-maps'导入MapView，{Marker，ProviderPropType};
从'immutability-helper'导入更新;
$ b $ const style = StyleSheet.create（{
container：{
... StyleSheet.absoluteFillObject，
height：400，
width：400，
justifyContent：'flex-end'，
alignItems：'center'，
}，
map：{
... StyleSheet.absoluteFillObject，
}，
}）;
导出默认类Fetchdata扩展组件{
构造函数（道具）{
super（道具）;
};
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 （（response）=> response.json（））
.then（（responseJson）=> {
var newlatlng;
for（i = 0; i< responseJson.length; i ++）{
newlatlng = update（this.state，{markers：{
key：{$ set： i}，
latlng：{纬度：{$ 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从服务器获取：
[{ 经纬度：{ 纬度： 40.3565， 经度： 27.9774}}，{ 经纬度：{ 纬度： 40.3471，经度：27.9598}}，{latlng：{latitude：40，longitude：27.9708}}]
解决方案我不确定更新函数，但在这里您指定了未定义的值：
latlng：{纬度：{$ set：responseJson.latitude}，经度：{$ set：responseJson.longitude}
responseJson作为子节点没有经度和纬度。他们有LatLng
I am trying to dynamically get nearby markers from the server and print on a map without success. When I update map location I am getting below warnings. The expected behaviour is getting markers printed on the map when I drag map but instead it doesn't show any dynamic fetched markers but show warnings.
20:27:15: [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'object[key]')]
- node_modules/immutability-helper/index.js:81:44 in
- node_modules/immutability-helper/index.js:73:29 in update
- ... 16 more stack frames from framework internals
App.js (Main file)
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 (the file getting server data)
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 get from the server:
[{"latlng":{"latitude":"40.3565","longitude":"27.9774"}},{"latlng":{"latitude":"40.3471","longitude":"27.9598"}},{"latlng":{"latitude":"40","longitude":"27.9708"}}]
解决方案 I am not sure about the update function but here you are assigning undefined values:
latlng: { latitude: { $set: responseJson.latitude }, longitude: { $set: responseJson.longitude }
responseJson does not have latitude and longitude as children. They have LatLng
这篇关于反应本地地图 - 从服务器获取标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
