android 如何使用React Native更改Google Mapview Polyline Stroke Style Dashed Style Line?

tjvv9vkg  于 2023-04-04  发布在  Android
关注(0)|答案(2)|浏览(121)

在我的场景中,我已经在我的应用程序中使用“react-native-maps”npm包实现了Google MapView。在这个包中,根据我的要求,我必须绘制一个虚线圆折线,就像下面提到的图像绿色线应该是虚线笔划样式。如何将其更改为虚线或点笔划样式线。
enter image description here

<Polyline
            coordinates={[
              { latitude: 37.88045, longitude: -122.4324 },
              { latitude: 37.78825, longitude: -122.3903 },
            ]}
            strokeWidth={3}
            lineDashPattern={[170, 170]}
          />
rdlzhqv9

rdlzhqv91#

你应该使用<Circle/>而不是`。下面是一个sample code和代码片段。(注意:lineDashPattern仅适用于iOS(doc)。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Circle, 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 {
  render() {
    return (
      <View style={styles.container}>

        <MapView style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker
            coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          />

          <Circle
            center={{ latitude: 37.78825, longitude: -122.4324 }}
            radius={1000}
            strokeWidth={3}
            strokeColor="green"
            lineDashPattern={[10]} />

        </MapView>
      </View>
    );
  }
}

export default MapApp;
6jygbczu

6jygbczu2#

ios和android支持折线描边

使用linedashpattern

代码:

<Polyline
    coordinates={[
        { latitude: 37.8025259, longitude: -122.4351431 },
        { latitude: 37.7896386, longitude: -122.421646 },
        { latitude: 37.7665248, longitude: -122.4161628 },
        { latitude: 37.7734153, longitude: -122.4577787 },
        { latitude: 37.7948605, longitude: -122.4596065 },
        // { latitude: 37.8025259, longitude: -122.4351431 }
    ]}
lineDashPattern={[5, 5,5,5,5]}
    strokeColor="yellow" // fallback for when `strokeColors` is not supported by the map-provider
    strokeColors={[
        '#7F0000',
        '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
        '#B24112',
        '#E5845C',
        '#238C23',
        // '#7F0000'
    ]}
    strokeWidth={5}
/>

相关问题