我想在反应原生的Google Map 上放置多条折线 . 我正在使用react-native-maps和@ mapbox /折线来创建我在顶部导入的折线:
import MapView from 'react-native-maps';
import Polyline from '@mapbox/polyline';
这是代码的其余部分:
import {
Marker
} from 'react-native-maps';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from 'react-native';
export default class consults extends Component {
constructor(props) {
super(props);
this.state = {
coords: []
}
}
componentDidMount() {
this.getDirections("55.23607109335242, 10.478553771972656", "55.178279530181264, 10.525074005126953");
this.getDirections("55.067434, 10.607282", "55.093088, 10.588734");
}
async getDirections(startLoc, destinationLoc) {
try {
let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${ startLoc }&destination=${ destinationLoc }&mode=${'walking'}`)
let respJson = await resp.json();
let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
let coords = points.map((point, index) => {
return {
latitude : point[0],
longitude : point[1]
}
})
this.setState({coords: coords})
return coords
} catch(error) {
alert(error)
return error
}
}
static navigationOptions = {
title: 'Kort over stier'
};
render () {
const { navigate } = this.props.navigation;
const { region } = this.props;
console.log(region);
return (
<View style ={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 55.0598,
longitude: 10.6068,
latitudeDelta: 0.40,
longitudeDelta: 0.40,
}}
>
<MapView.Polyline
coordinates={this.state.coords}
strokeWidth={2}
strokeColor="red"/>
</MapView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
当我只是请求从一个定位到另一个定位的坐标时,它绘制一个行示例:
this.getDirections("55.23607109335242, 10.478553771972656", "55.178279530181264, 10.525074005126953");
当我请求两个时,我得到最后一个的坐标 . 知道如何在同一张 Map 上绘制多条折线的人吗?提前谢谢:-)
Update 从另一个stakoverflow问题中找到此示例图片 . 我想要相同但没有标记:
1 回答
你有没有尝试存储折线数组?必须对组件进行一些更改,顺便说一下:
并为渲染方法: