web-dev-qa-db-fra.com

React Native Maps: l'image des marqueurs ne s'affiche pas à l'aide du marqueur personnalisé dans react-native-maps

J'utilise react-native-maps mais je suis confronté à un problème qui, après de nombreuses recherches sur Google sans réponse, me le demande ici . J'essaie d'utiliser le marqueur personnalisé pour le marqueur de la carte comme dans l'image suivante. 

enter image description here

  • en effectuant une recherche, j'ai découvert que je devais utiliser un marqueur personnalisé pour réaliser la conception du fabricant, puis j'ai créé un composant de marqueur personnalisé. 

    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;

lorsque j'utilise la classe CustomMarker.js uniquement, cela fonctionne bien et il montre l'image, mais lorsque je l'utilise comme vue personnalisée du marqueur, il ne montre pas l'image.

 enter image description here

Je ne sais pas pourquoi il ne peut pas restituer l'image avec le marqueur personnalisé dans Android . Et voici mon code où j'utilise une carte, des marqueurs et une classe de marqueur personnalisée 

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>

tout type d'aide serait apprécié.

androidgoogle-mapsreact-nativereact-native-maps
10
Abdu4

Utilisez SVG pour cette 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
Mahdi Bashirpour

J'ai eu le même problème.

Lorsque vous chargez une application pour la première fois, l'image ne s'affiche pas, mais pour un chargement ultérieur, ce problème est résolu et affichez l'image.

Juste assez après le chargement de l'image, appelez this.forceUpdate()

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

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

Vous pouvez suivre ceci:

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

3
Mahdi Bashirpour

Mon problème était résolu maintenant.

J'espère que votre problème sera résolu.

Ceci est mon code propre:

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
Mahdi Bashirpour

J'ai eu le même problème, de github post

si vous utilisez ci-dessous (MapView, Image) le motif du premier problème de chargement existera toujours 

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

ainsi adopté ci-dessous solution: l'astuce consiste à enregistrer l'id du marqueur sélectionné dans le 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;
  }
}

composant Fonction

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

Action

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

Ceci est un autre exemple

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
Mahdi Bashirpour

J'ai résolu ce problème en remplaçant Image de nombre entier gamma sur 16 bits par Image de nombre entier gamma sur 8 bits. Cela peut être fait dans Gimp, une fois que vous avez exporté Image, sélectionnez 8bpc RGBA.

1
Vladimír

La solution @Mahdi Bashirpour fonctionne pour moi. juste mise à jour ci-dessus réponse.

Les autres images cessent de fonctionner si nous importons 'Image' à partir de 'react-native-svg'

Ma solution est ci-dessous.

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>

Utilisez 'Imagesvg' pour l'image du marqueur . Cela fonctionne pour moi sur Android 7 et 8. Réaction de la version native '0.55.3'

1
krish