Как наложить SVG поверх карты? - PullRequest
Новая
       27

Как наложить SVG поверх карты?

0 голосов
/ 30 апреля 2019

Я пытаюсь отобразить пользовательский SVG поверх карты expo maps provider = 'google' map. Легко визуализировать текст поверх карты, используя position ='lative ', однако я не могу заставить SVG-панель также отображать слой поверх карты. В настоящее время я отрисовываю вид с его положением относительно карты. Тем не менее, когда я пытаюсь поместить svg внутри этого представления, это не удается, потому что он создает окно просмотра под картой. Я нигде не видел в Интернете, чтобы я мог установить фактический тип позиции компонента. Кто-нибудь знает хитрость, чтобы сделать положение окна просмотра относительно или наложение слоя сверху фона? Вот некоторый код:

Код SVG: 

   /FunctioningSvg.js
   import React, { Component } from 'react';
   import { View, StyleSheet } from 'react-native';
   import { Constants, Svg } from 'expo';


    export default class FunctioningSvg extends Component {
    render() {
      return (
        <View style={styles.container}> /* this will work with text */
            <Svg height="70%" width="70%" viewBox="50 0 400 400"> /* right here is my problem, the height and width of the actual SVG component is not layer on top. Can I add a position relative to this viewbox somehow? */
                <Svg.Circle
                    cx="250.22"
                    cy="227.21"
                    r="35.81"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Circle
                    cx="392.5"
                    cy="91.81"
                    r="48.91"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M424.33 91.81h-63.66"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M392.38 59.67v63.66"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
                <Svg.Path
                    d="M250.22 450.55L136.13 267.74c-8.78-14.06-7.68-30.6-7.68-47.18 0-49.24 62.68-100.57 121.77-100.57 58.9 0 121.34 50.31 121.34 100.66 0 16.52 1.09 33.01-7.64 47.04l-113.7 182.86"
                    fill="none"
                    stroke="#fff"
                    strokeWidth={8}
                />
            </Svg>
        </View>
    );
}
    }

Стили SVG: 

    const styles = StyleSheet.create({
       container: {
        marginLeft: '50%',
        position: 'relative',
       },
      });

Код карты: 

    <View style={styles.mapContainer}>
          <MapView 
              ref={this.map}
              style={styles.map}  provider="google" customMapStyle={NIGHT_MAP_STYLE}
              initialRegion={{
                latitude: this.props.reduxMap.latitude,
                longitude: this.props.reduxMap.longitude,
                latitudeDelta: this.props.reduxMap.latitudeDelta,
                longitudeDelta: this.props.reduxMap.longitudeDelta,
              }}
              showsCompass={true}
              showsScale={true}
              showsUserLocation={true}
              showsMyLocationButton={true}
              onChange={(event) => this.handleMapViewChange(event)}
              >             
            {this.renderRelevantQueues()}     
          </MapView>
          {/* <View style={styles.createAndCenterView}>
            <Text style={styles.createQueue} onPress={this.createQueue} >Create</Text>
          </View> */}
          <FunctioningSvg />
        </View>

Стили карты: 

   mapContainer: {
    flex: 1
   },
   map: {
    flex: 1,
   },
...