在两个标记之间绘制一条映射框反应原生？

我能够使用react-native的以下代码在地图上创建marker （注释）。

 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View } from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; import Mapbox from '@mapbox/react-native-mapbox-gl'; const columbusCircleCoordinates = [ -73.98197650909422, 40.768793007758816 ]; Mapbox.setAccessToken('pk.eyJ1IjoiYW1hbHAiLCJhIjoiY2pkdTZ0M3ZpMnFsYzJ2amc0ZnRjZXRhMCJ9.8PFRuAdcjb7OMHAQHiW5fA'); export default class App extends Component { renderAnnotations () { return (       ) } render() { return (   {this.renderAnnotations()}   ); } } const styles = StyleSheet.create({ container: { flex: 1, }, annotationContainer: { width: 30, height: 30, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderRadius: 15, }, annotationFill: { width: 30, height: 30, borderRadius: 15, backgroundColor: 'orange', transform: [{ scale: 0.6 }], } }); 

但是从教程中我发现我们能够使用在mapbox上绘制polylines 。 但是有关于如何做到这一点的正确例子。

有人可以提供一个示例code如何在mapbox react-native上的两个注释之间画一条line 。

Answer 1

就像我在之前的回答中分享的那样：在你的状态中，有一个变量是一个类型为线串的geojson。 这需要两个以上的坐标，这基本上是你通过线的点数。 当他们向您显示折线标签时，“真棒”地图框文档忽略了什么，您需要将其包装在MapboxGL标记下的shapeSource标记中。 在this.state中，我放了一个名为route的geojson变量。 使用下面的代码示例可能会更有意义：

 import React, {Component} from 'react'; import { Platform, StyleSheet, Text, View, Button } from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; MapboxGL.setAccessToken('your access key'); export default class App extends Component { constructor() { super(); this.state = { route: { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [ 11.953125, 39.436192999314095 ], [ 18.896484375, 46.37725420510028 ] ] } } ] }, } } render() { return (        ); } } const styles = StyleSheet.create({ container: { flex: 1, }, });