5

当用户执行新搜索时，我需要删除我在组件上绘制的折线。现在，我最终在同一张地图上绘制了 2 条以上的路线，而不是仅显示新路线的新搜索。

我按照本教程渲染折线：https ://medium.com/@ali_oguzhan/react-native-maps-with-google-directions-api-bc716ed7a366 。

我尝试在 componentWillUnmount 和 ComponentWillMount 中清空状态（它为折线提供了要绘制的坐标）。我还看到了对 polyline.remove() 的引用，但据我所知，react-native-maps 或 mapbox/polyline 包不存在该功能。Mapbox 似乎有一种删除图层的方法，但是我找不到将其合并到我的项目中的方法。

我将不胜感激有关如何删除折线的任何线索。

这是一些代码。JSX：

    <MapView style={styles.map} initialRegion={{
      latitude:startLat,
      longitude:startLng,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }}
    showsUserLocation={true}
    loadingEnabled={true}
    loadingIndicatorColor="#e6fef6"
    loadingBackgroundColor="#400230"
    >
    <MapView.Polyline
        coordinates={this.state.coords}
        strokeWidth={2}
        strokeColor="purple"/>

    </MapView>

解码折线：

      async getBikeDirections(startBike, endBike) {
try {
  let respBike = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${startBike}&destination=${endBike}&mode=bicycling`)

  let respJsonBike = await respBike.json()
  let completeBikeSteps = respJsonBike.routes[0].legs[0].steps
  let pointsBike = Polyline.decode(respJsonBike.routes[0].overview_polyline.points)

  let coordsBike = pointsBike.map((point, index) => {
    return {
      latitude: point[0],
      longitude: point[1]
    }
  })

  let text = completeBikeSteps.map((obj, index) => {
    let regex = /(<([^>]+)>)/ig,
      result = obj.html_instructions.replace(regex, "")
    return result
  })

  return {
    coordsBike,
    text
  }
} catch (error) {
  alert(error)
  return error
}

}

4

0 回答 0