反应原生谷歌地图折线阴影？

Question

我在 react-native 中构建了基于地图的应用程序。我正在为此使用 react-native google-maps 库。我正在寻找我的两个问题的解决方案？不知道怎么解决。

1. 如何为折线添加阴影？
2. 如何让我的折线从给定的标记开始。

下面给出了屏幕截图，它们可能会对我所说的有所帮助。

How to add shadow to given polyline Connect Polyline and marker together

Answer 1

您提到您正在使用 react-native google-maps 库。您是指react-native-maps 库吗？如果是这样，您是否尝试过react-native-maps Polyline？您可以更改折线的笔触属性，但不能添加阴影。如果您愿意，可以创建另一条具有相同坐标（路径）的折线，并更改看起来像折线阴影的笔触属性。您还可以将这条折线的坐标设置为从某个坐标或您的标记开始和结束。

下面是sample code 和代码 sn-p：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Polyline } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

class MapApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      coords: [
        { latitude: 37.7948605, longitude: -122.4596065 },
        { latitude: 37.8025259, longitude: -122.4351431 },
      ],
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.7948605,
            longitude: -122.4596065,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          {this.state.coords.map((coords, index) => (
            <Marker key={index} coordinate={coords} />
          ))}

          <Polyline
            coordinates={this.state.coords}
            //strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
            strokeColor={'rgb(0, 0, 0)'}
            strokeWidth={6}
          />
          <Polyline
            coordinates={this.state.coords}
            //this is the polyline for shadow
            strokeColor={'rgba(0, 0, 0,0.3)'}
            strokeWidth={15}
          />
        </MapView>
      </View>
    );
  }
}

export default MapApp;