我需要从服务器获取地图位置变化的标记位置,并在地图上反映这个新的标记位置。如果我在状态中放置一些标记,它会显示标记,但它不会动态显示任何标记。我在控制台上没有收到任何错误或警告。
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"}]
答案 0 :(得分:1)
有一些事情正在发生,这是一个问题,应该给你一个错误。问题是,由于您使用的是onRegionChangeComplete
,因此没有触发任何内容,但正确的属性只是onRegionChange
。那时的错误可能会让你完成剩下的工作。
如果您遇到错误且仍不确定要去哪里,请随时提出更多说明。