it-swarm.com.de

Native Karten reagieren: Das Markierungsbild wird nicht mit benutzerdefinierten Markierungen in reaktiven Karten angezeigt

Ich verwende react-native-maps, aber ich hatte ein Problem, das mich nach viel Googeln ohne Antwort dazu auffordert, hier zu fragen ... Ich versuche, die Markierung in der Karte als das folgende Bild zu verwenden 

enter image description here

  • beim Durchsuchen stellte ich fest, dass zur Erstellung des Herstellers der benutzerdefinierte Marker verwendet werden musste. Dann erstellte ich eine benutzerdefinierte Marker-Komponente 

    import React, { Component } from "react";
    import { View } from "react-native";
    import {
    Text,
    Left,
    Right,
    Thumbnail,
    } from "native-base";
    const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
    class CustomMarker extends Component {
    render() {
        return (
        <View style={{ flexDirection: 'row', width: 140, height: 60, 
          borderRadius: 70, backgroundColor: 'orange' }}>
            <Left>
                <Thumbnail source={defaultEmployeeLogo} />
            </Left>
            <Right>
                <Text style={{
                    color: '#fef',
                    fontSize: 13,
                    paddingBottom: 2,
                    fontFamily: 'Roboto',
                    alignItems: 'center',
                    paddingRight: 10
                }}>Mohammad</Text>
            </Right></View >);
       }
    }
    export default CustomMarker;
    

wenn ich nur die CustomMarker.js-Klasse verwende, funktioniert sie einwandfrei und zeigt das Bild, aber wenn ich es als benutzerdefinierte Ansicht der Markierung verwende, wird das Bild nicht angezeigt

 enter image description here

Ich weiß nicht, warum es das Bild mit benutzerdefinierten Markern in Android nicht rendern kann. Hier ist mein Code, bei dem ich Karten, Markierungen und benutzerdefinierte Markierungsklassen verwende 

return (
  <View style={styles.map_container}>
    <MapView
      style={styles.map}
      customMapStyle={customrMapStyle}
      region={{
        latitude: this.state.region.latitude,
        longitude: this.state.region.longitude,
        latitudeDelta: 0.4,
        longitudeDelta: 0.41,
      }} >
      {
        coordinationData.map(function (marker, i) {

          let lat = marker.latLang.latitude;
          let lang = marker.latLang.longitude;
           <MapView.Marker
            key={i}
            coordinate={
              {
                latitude: lat,
                longitude: lang,
                latitudeDelta: 0.4,
                longitudeDelta: 0.41
              }
            }
            title={marker.title}
            description={marker.description}

          >
            <CustomMarker />
          </MapView.Marker>
        })}
    </MapView>
  </View>

jede Art von Hilfe wäre dankbar.

10
Abdu4

Verwenden Sie SVG für diese https://github.com/react-native-community/react-native-svg

<Marker
    coordinate={{
        longitude: lang,
        latitude: lat,
    }}
>
    <View style={{
        flexDirection: 'row', width: 100, height: 30,
        backgroundColor: 'orange'
    }}>
        <Svg
            width={40} height={30}>
            <Image
                href={url}
                width={40}
                height={30}
            />
        </Svg>
        <View
            style={{
                flexDirection: 'column'

            }}
        >
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.title}</Text>
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.description}</Text>
        </View>
    </View>
</Marker>
2

Ich hatte das gleiche Problem.

Wenn Sie eine Anwendung zum ersten Mal laden, wird das Bild nicht angezeigt, aber beim späteren Laden wird dieses Problem behoben und das Bild angezeigt.

Genug genug, nachdem das Bild geladen wurde, rufen Sie this.forceUpdate() auf.

const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");

<Image source={defaultEmployeeLogo} onLoad={() => this.forceUpdate()}>
    <Text style={{width:0, height:0}}>{Math.random()}</Text>
</Image>

Sie können das nachverfolgen:

https://github.com/react-community/react-native-maps/issues/924

3

Mein Problem wurde gerade gelöst.

Ich hoffe dein Problem wird gelöst.

Dies ist mein sauberer Code:

import React, {Component} from 'react';
import {ImageBackground, Text} from 'react-native';
import {Marker} from 'react-native-maps';

export default class CustomMarker extends Component {
    state = {
        initialRender: true
    }

    render() {
        return (
            <Marker
              //...
            >
                <ImageBackground
                    source={require('../assets/cluster3_mobile.png')}>

                    // *** These lines are very important ***
                    onLoad={() => this.forceUpdate()}
                    onLayout={() => this.setState({initialRender: false})}
                    key={`${this.state.initialRender}`}
                    >


                    // **** This line is very very important ****
                    <Text style={{width: 0, height: 0}}>{Math.random()}</Text>

                </ImageBackground>
            </Marker>
        );
    }
}
3

Ich hatte dasselbe problem, von github post

bei Verwendung des folgenden Musters (MapView, Image) beim ersten Laden tritt weiterhin ein Problem auf.

<MapView.Marker>
    <Image source={img_marker} />
</MapView.Marker>

die folgende Lösung lautet: Trick ist das Speichern der aktuell ausgewählten Marker-ID in redux.

class Map extends React.Component {
render() {
    let {region, markers , markerClick} = this.props;
    const normalMarkerImage = require('../../images/normal_marker.png');
    const selectedMarkerImage = require('../../images/selected_marker.png');
    return !isObjectEmpty(region) && !isObjectEmpty(markers) ? (
        <MapView
            style={styles.map}
            showsUserLocation={true}
            followUserLocation={true}
            zoomEnabled={true}
            region={region}
            paddingAdjustmentBehavior={'automatic'}
            showsIndoors={true}
            showsIndoorLevelPicker={false}
            showsTraffic={false}
            toolbarEnabled={false}
            loadingEnabled={true}
            showsMyLocationButton={true}>
            {markers && markers.length > 0
                ? markers.map((marker, i) => (
                        <MapView.Marker
                            coordinate={{
                                longitude: marker.loc.coordinates[0],
                                latitude: marker.loc.coordinates[1],
                            }}
                            key={`marker-${i}`}
                            style={{height: 20, width: 20}}
                            onPress={e => markerClick(e, marker)}
                            image={
                                this.props.selectedMarker === marker._id
                                    ? selectedMarkerImage
                                    : normalMarkerImage
                            }
                        />
                  ))
                : null}
        </MapView>
    ) : null;
  }
}

Komponente Funktion

markerClick = async (event, data) => {
    this.props.dispatch(
        setMarkerIconInRedux(this.state.popover.currentData._id)
    );
};

Aktion

export const setMarkerIconInRedux = where => {
    return {
        type: 'SET_MARKER_ICON',
        _id: where,
    };
};

Redux

export const currentSelectedMarker = (state = {selectedMarker: ''}, action) => 
{
    if (action.type === 'SET_MARKER_ICON') {
        return {selectedMarker: action._id};
    } else if (action.type === 'REMOVE_MARKER_ICON') {
        return {selectedMarker: ''};
    } else {
        return state;
    }
};
2
vijay

Dies ist ein weiteres Beispiel

class PinMarker extends Component {
  state = {
    initialRender: true
  }
  render() {
    return (
      <MapView.Marker coordinate={coordinate}>
        <Image
          source={...}
          onLayout={() => this.setState({ initialRender: false })}
          key={`${this.state.initialRender}`}
        />
      </MapView.Marker>
    )
  }
}
2

Ich habe dieses Problem gelöst, indem ich das 16-Bit-Gamma-Integer-Bild durch das 8-Bit-Gamma-Integer-Bild ersetzt habe. Es kann in Gimp ausgeführt werden, sobald das Bild 8bpc RGBA exportiert wurde.

1
Vladimír

@ Mahdi Bashirpour-Lösung funktioniert für mich. Aktualisieren Sie nur die Antwort.

Andere Bilder funktionieren nicht mehr, wenn wir "Image" aus "React-native-svg" importieren.

Meine Lösung ist unten.

import {Image} from 'react-native';   // for other images in our render method.
import { Image as Imagesvg } from 'react-native-svg';

<Marker
   coordinate={marker.latlng}
   title={marker.title}
 >

<View style={{ height: 90, width: 90, backgroundColor: 'orange' }}>
      <Svg width={90} height={90}}>
        <Imagesvg href={marker_g} width={90} height={90} />  // Local Images
       <Imagesvg href={{uri:url}} width={90} height={90} />   //Server images
    </Svg>
</View>
</Marker>

Verwenden Sie "Imagesvg" für das Markierungsbild . Es funktioniert für mich unter Android 7 und 8. Reagieren Sie die native Version '0.55.3'.

1
krish