Question

您好，我想在从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>

但出现此错误： **更新由AIRMapPolyline管理的视图的属性“坐标”时出错**

Answer 1

该错误似乎是由于折线的坐标为空或未定义。尝试更改此代码：

  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

Answer 2

那个代码逻辑错误，因为该代码在下面的这段代码中用一点创建了一些polyLines：我更改代码并正常工作：

 <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>

如何在具有许多点（经度和纬度）的反应本机地图上绘制折线？

2 个答案: