React Native Maps：在 react-native-maps 中使用自定義標記不顯示標記圖像

Question

我正在使用react-native-maps但我遇到了一個問題，在沒有答案的情況下進行了大量的谷歌搜索后，我在這里問它。 我正在嘗試使用自定義標記作為地圖中的標記，如下圖所示

• 當我搜索時，我發現需要使用 Custom Marker 來完成制造商的設計，然后我創建了一個 Custom Marker 組件

  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;

當我單獨使用 CustomMarker.js 類時它工作正常並顯示圖像但是當我將它用作標記自定義視圖時它不顯示圖像

我不知道為什么它不能在 android 中使用自定義標記渲染圖像。 這是我使用地圖、標記和自定義標記類的代碼

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>

任何形式的幫助將不勝感激。

Answer 1

為此https://github.com/react-native-community/react-native-svg使用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>

Answer 2

我的問題馬上就解決了。

我希望你的問題會得到解決。

這是我干凈的代碼：

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>
        );
    }
}

Answer 3

我有同樣的問題。

首次加載應用程序時，圖像不顯示，但對於以后加載，此問題已解決並顯示圖像。

加載圖像后調用this.forceUpdate()就足夠了

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

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

你可以跟蹤這個：

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

Answer 4

@Mahdi Bashirpour 解決方案對我有用。 只是升級上面的答案。

如果我們從“react-native-svg”導入“Image”，其他圖像將停止工作

我的解決方案如下。

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>

使用“Imagesvg”作為標記圖像。 它在 android 7 和 8 上對我有用。反應原生版本“0.55.3”

Answer 5

這是另一個例子

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>
    )
  }
}

Answer 6

我有同樣的問題， 來自 github 帖子

使用 below(MapView , Image) 模式第一次加載問題仍然會發生

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

因此采用以下解決方案：技巧是將當前選定的標記 ID 保存在 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;
  }
}

組件功能

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

行動

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

終極版

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;
    }
};

Answer 7

我通過用 8 位伽馬整數圖像替換 16 位伽馬整數圖像解決了這個問題。 它可以在 Gimp 中完成，一旦導出圖像選擇 8bpc RGBA。

Answer 8

自 2019 年 10 月起，圖像可以顯示在標記中，同時將 trackingViewChanges 設置為 true。 我使用 FastImage 但一般的想法是在加載圖像后立即將 trackingViewChanges 設置為 true ，然后設置為 false ，這樣就不會有任何性能問題。

export const UserMapPin = props => {
  const [trackView, setTrackView] = useState(true);

  function changeTrackView() {
    setTrackView(false);
  }

  return (
    <Marker
      tracksViewChanges={trackView}
      coordinate={props.coordinates}>
      <View style={styles.imageIconContainer}>
          <FastImage
            onLoadEnd={changeTrackView}
            style={styles.someImageStyle}
            source={{
              uri: props.imageURI,
            }}
            resizeMode={FastImage.resizeMode.cover}
          />
      </View>
    </Marker>
  );
};

Answer 9

就我而言，問題僅在於遠程圖像，因此我通過 hack 解決了它。

我只是在文本組件內部放置了一個寬度為零的圖像版本，在文本組件外部放置了一個版本。 突然間一切都解決了。

    <Image
     source={{ uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" }}
     style={styles.companyLogoMarker}
     resizeMode="cover"
     />
     <Text style={styles.markerText}>
        {names?.[0]?.value}
       <Image
           source={{ uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" }}
           style={{width: 0, height: 0}}
           resizeMode="cover"
        />
     </Text>

在撰寫此答案時，這是[react native maps][1]一個錯誤，自 2017 年以來未解決

Answer 10

在<View>添加您的自定義標記組件，例如<View> your marker custom view </View> 。 也許它會解決你的問題。