144*_*144 5 polyline google-directions-api mapbox react-native react-native-maps
当用户执行新搜索时,我需要删除我在组件上绘制的折线。现在我最终在同一张地图上绘制了 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>
Run Code Online (Sandbox Code Playgroud)
解码折线:
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
}
Run Code Online (Sandbox Code Playgroud)
}
归档时间: |
|
查看次数: |
557 次 |
最近记录: |