不显示从服务器获取的标记
Doesn't show markers get from server
抱歉问了类似的问题,建议不要改原问题。所以我就稍微不同的问题提出了另一个问题。这次我无法在 ComponentDidMount 上打印标记,尽管一切看起来都很正常。没有错误或警告,但无法在地图上打印标记。
import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert,TouchableOpacity, AppRegistry} from 'react-native'
import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import axios from 'axios';
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
class Fetchdata extends Component {
constructor (props) {
super(props);
};
state = {
latitude: 40.35,
longitude: 27.95,
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 },
);
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))
}
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,
}}
>
{this.state.markers.map((marker, index) => (
<MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
))}
</MapView>
</View>
);
}
}
Fetchdata.propTypes = {
provider: ProviderPropType,
};
export default Fetchdata;
JSON 文件返回
[{
"markers": {
"index": "1",
"latlng": {
"latitude": "40.3565",
"longitude": "27.9774"
}
}
}, {
"markers": {
"index": "3",
"latlng": {
"latitude": "40.3471",
"longitude": "27.9598"
}
}
}, {
"markers": {
"index": "2",
"latlng": {
"latitude": "40",
"longitude": "27.9708"
}
}
}]
您的问题从这里开始:
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))
您的响应是一个数组,您需要像这样在正确的状态对象中设置它
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response}))
这里还有第二个问题,那就是您从响应中获得的数据。每个数组项都包含一个 "markers" 对象,这是完全不必要的,并且会使数据结构复杂化。您可以通过处理从 API 调用中获得的数据来解决这个问题,然后再将它们发送到这样的状态:
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response.map(marker)=> {
return marker.markers
}}))
我在@needsleep 的更正后做了一些小改动。此外,我必须更改纬度和经度信息以在服务器端浮动。最后状态如下:
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: []
};
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('http://isg.info.tr/query_maps.php' + '?latitude=' + region.latitude + '&longitude=' + region.longitude)
.then((response) => response.json())
.then((responseJson) => {
this.setState({markers: responseJson });
})
.catch((error) =>{
console.error('hata'+ error);
});
}
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={marker.index} coordinate={marker.latlng} title={'marker.title'} />
))}
</MapView>
</View>
);
}
}
Fetchdata.propTypes = {
provider: ProviderPropType,
};
抱歉问了类似的问题,建议不要改原问题。所以我就稍微不同的问题提出了另一个问题。这次我无法在 ComponentDidMount 上打印标记,尽管一切看起来都很正常。没有错误或警告,但无法在地图上打印标记。
import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert,TouchableOpacity, AppRegistry} from 'react-native'
import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import axios from 'axios';
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
class Fetchdata extends Component {
constructor (props) {
super(props);
};
state = {
latitude: 40.35,
longitude: 27.95,
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 },
);
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))
}
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,
}}
>
{this.state.markers.map((marker, index) => (
<MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
))}
</MapView>
</View>
);
}
}
Fetchdata.propTypes = {
provider: ProviderPropType,
};
export default Fetchdata;
JSON 文件返回
[{
"markers": {
"index": "1",
"latlng": {
"latitude": "40.3565",
"longitude": "27.9774"
}
}
}, {
"markers": {
"index": "3",
"latlng": {
"latitude": "40.3471",
"longitude": "27.9598"
}
}
}, {
"markers": {
"index": "2",
"latlng": {
"latitude": "40",
"longitude": "27.9708"
}
}
}]
您的问题从这里开始:
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))
您的响应是一个数组,您需要像这样在正确的状态对象中设置它
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response}))
这里还有第二个问题,那就是您从响应中获得的数据。每个数组项都包含一个 "markers" 对象,这是完全不必要的,并且会使数据结构复杂化。您可以通过处理从 API 调用中获得的数据来解决这个问题,然后再将它们发送到这样的状态:
axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response.map(marker)=> {
return marker.markers
}}))
我在@needsleep 的更正后做了一些小改动。此外,我必须更改纬度和经度信息以在服务器端浮动。最后状态如下:
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: []
};
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('http://isg.info.tr/query_maps.php' + '?latitude=' + region.latitude + '&longitude=' + region.longitude)
.then((response) => response.json())
.then((responseJson) => {
this.setState({markers: responseJson });
})
.catch((error) =>{
console.error('hata'+ error);
});
}
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={marker.index} coordinate={marker.latlng} title={'marker.title'} />
))}
</MapView>
</View>
);
}
}
Fetchdata.propTypes = {
provider: ProviderPropType,
};