如何在具有多点(纬度和经度)的反应本机地图上绘制折线?
How to draw polyline on react native maps with many points(latitude and longitude)?
嗨,我想在来自 API
的多个位置之间画线
这是我来自 API
的数据
(3) [{…}, {…}, {…}]
0:
CONTACTPERSONID: 2017011300
ENABLEPOLL: 0
HARDWAREID: 409792319815
LANDMARKID: 0
MESSAGETIME: "2دقيقه پيش"
MOVINGSTATE: "m"
NICKNAME: "ایران 78 - 875 ع 73"
POSDESCRIPTION: "ايران: استان كرمان - شهربابك"
SENTDATE: "18:14"
SENTDATE1: "1398-06-23 18:14:16"
SIGNATURE: "1-Normal"
SPEED: 51
TRUCKSTATE: "در حال حرکت"
VEHICLETYPE: 0
XPOINT: 55.13055
YPOINT: 30.128971
__proto__: Object
1: {HARDWAREID: 420474797787, NICKNAME: "رضا نوری پور ایران 62 - 374 ع 66", SENTDATE: "18:05", XPOINT: 51.2906383, YPOINT: 35.6798033, …}
2: {HARDWAREID: 2225434572, NICKNAME: "عابدین پور 938ع43", SENTDATE: "17:16", XPOINT: 48.33547, YPOINT: 38.26992, …}
Xpoint 和 Ypoint 的纬度和经度
这是我要显示的代码:
<View style={{ height: hp('50%'), width: wp('100%') }}>
<MapView
provider={PROVIDER_GOOGLE}
onLayout={this.onMapLayout}
style={styles.containerMap}
initialRegion={{
latitude: this.props.data ? this.props.data[0].YPOINT : '',
longitude: this.props.data ? this.props.data[0].XPOINT : '',
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} >
{this.state.isMapReady && this.props.data.map((value, index) => {
let poly = {
latitude: value.YPOINT,
longitude: value.XPOINT,
}
return < Polyline
strokeColor='#fd016f'
coordinates={poly}
/>
})
}
</MapView>
</View>
但出现此错误:
**更新 属性 管理视图的“坐标”时出错 by:AIRMapPolyline **
看起来这个错误可能是因为折线的坐标为空或未定义。尝试更改此代码:
let poly = {
latitude: value.YPOINT,
longitude: value.XPOINT,
}
具有以下内容:
let poly = {
latitude: value.YPOINT ? value.YPOINT : 0,
longitude: value.XPOINT ? value.XPOINT : 0,
}
希望这对您有所帮助,如果对您有用,请告诉我。
另见相关:
Error while updating property 'coordinate' of a view managed by: AIRMapMarker (React native)
https://github.com/react-native-community/react-native-maps/issues/1095
该代码逻辑错误,因为该代码在下面的代码中创建了一些带有一个点的多段线是正确的:
我更改了我的代码并且工作正常:
<View style={{ height: hp('50%'), width: wp('100%') }}>
<MapView
provider={PROVIDER_GOOGLE}
onLayout={this.onMapLayout}
style={styles.containerMap}
initialRegion={{
latitude: this.props.data ? this.props.data[0].YPOINT : '',
longitude: this.props.data ? this.props.data[0].XPOINT : '',
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} >
{this.state.isMapReady && <Polyline
strokeWidth={2}
strokeColor="red"
coordinates={[...this.props.data.map((value, index) => { return { latitude: value.YPOINT, longitude: value.XPOINT } })]}
/>}
</MapView>
</View>
嗨,我想在来自 API
的多个位置之间画线这是我来自 API
的数据(3) [{…}, {…}, {…}]
0:
CONTACTPERSONID: 2017011300
ENABLEPOLL: 0
HARDWAREID: 409792319815
LANDMARKID: 0
MESSAGETIME: "2دقيقه پيش"
MOVINGSTATE: "m"
NICKNAME: "ایران 78 - 875 ع 73"
POSDESCRIPTION: "ايران: استان كرمان - شهربابك"
SENTDATE: "18:14"
SENTDATE1: "1398-06-23 18:14:16"
SIGNATURE: "1-Normal"
SPEED: 51
TRUCKSTATE: "در حال حرکت"
VEHICLETYPE: 0
XPOINT: 55.13055
YPOINT: 30.128971
__proto__: Object
1: {HARDWAREID: 420474797787, NICKNAME: "رضا نوری پور ایران 62 - 374 ع 66", SENTDATE: "18:05", XPOINT: 51.2906383, YPOINT: 35.6798033, …}
2: {HARDWAREID: 2225434572, NICKNAME: "عابدین پور 938ع43", SENTDATE: "17:16", XPOINT: 48.33547, YPOINT: 38.26992, …}
Xpoint 和 Ypoint 的纬度和经度
这是我要显示的代码:
<View style={{ height: hp('50%'), width: wp('100%') }}>
<MapView
provider={PROVIDER_GOOGLE}
onLayout={this.onMapLayout}
style={styles.containerMap}
initialRegion={{
latitude: this.props.data ? this.props.data[0].YPOINT : '',
longitude: this.props.data ? this.props.data[0].XPOINT : '',
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} >
{this.state.isMapReady && this.props.data.map((value, index) => {
let poly = {
latitude: value.YPOINT,
longitude: value.XPOINT,
}
return < Polyline
strokeColor='#fd016f'
coordinates={poly}
/>
})
}
</MapView>
</View>
但出现此错误: **更新 属性 管理视图的“坐标”时出错 by:AIRMapPolyline **
看起来这个错误可能是因为折线的坐标为空或未定义。尝试更改此代码:
let poly = {
latitude: value.YPOINT,
longitude: value.XPOINT,
}
具有以下内容:
let poly = {
latitude: value.YPOINT ? value.YPOINT : 0,
longitude: value.XPOINT ? value.XPOINT : 0,
}
希望这对您有所帮助,如果对您有用,请告诉我。
另见相关:
Error while updating property 'coordinate' of a view managed by: AIRMapMarker (React native)
https://github.com/react-native-community/react-native-maps/issues/1095
该代码逻辑错误,因为该代码在下面的代码中创建了一些带有一个点的多段线是正确的: 我更改了我的代码并且工作正常:
<View style={{ height: hp('50%'), width: wp('100%') }}>
<MapView
provider={PROVIDER_GOOGLE}
onLayout={this.onMapLayout}
style={styles.containerMap}
initialRegion={{
latitude: this.props.data ? this.props.data[0].YPOINT : '',
longitude: this.props.data ? this.props.data[0].XPOINT : '',
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} >
{this.state.isMapReady && <Polyline
strokeWidth={2}
strokeColor="red"
coordinates={[...this.props.data.map((value, index) => { return { latitude: value.YPOINT, longitude: value.XPOINT } })]}
/>}
</MapView>
</View>