web-dev-qa-db-ja.com

ネイティブマップマーカーのカスタム画像を反応させることはデフォルトから変更できません

私はこれをコードのさまざまな順列で動作させるために約5時間費やしてから、再構築しました。生涯、デフォルトの「赤いポインター」マーカーを変更することはできません。リアクションネイティブマップのデフォルトのマーカー画像です。

_import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

...

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
        latitude: 37.600425,
        longitude: -122.385861,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}
>
    <MapView.Marker
        coordinate={marker.location}
        image={require('./images/test.png')}        <------ HERE
        width={48}
        height={48}
    />
</MapView>
_

画像は間違いなく正しいフォルダに存在します。さまざまな画像形式png/gif/jpg/svgを試し、_{{uri:...}}_および_icon/image_を使用して、幅/高さ属性を追加および削除しました。何も動作しないようです。常にデフォルトの赤いポインターが表示されます。

明らかなことを逃したことがありますか？

存在しないイメージまたはサポートされていないタイプのrequireを実行すると、プロジェクトパッケージャー/コンパイラーが失敗します。それは間違いなく画像を見ることができますが、それで何もしません。エミュレータと実際のデバイスで同じ結果が得られます。

image={require('./images/test.png')}

この行は、どういうわけか無視されているかのように、何もしません。

react-nativegoogle-maps-markersreact-native-androidreact-native-maps
4
Jammo

2つの解決策があります。

最初の解決策（推奨）

画像エディター（Photoshopなど）を使用してマーカー画像のサイズを変更し、iconとしてmarkerとして使用します

これを行うには、異なるサイズの写真を3枚作成します（YOUR_MARKER.png、[email protected]、[email protected]）（React Nativeは自動的に適切なアイテムを表示します）。

マーカーが多数ある場合、これは良い解決策です（これを明確にするために ここ を参照できます）。

<Marker
    coordinate={ ... }
    tracksViewChanges={false}
    icon={require('./YOUR_MARKER.png')}
/>

2番目のソリューション

@ shubham-raitkaが言ったように、Image内でmarkerを使用できます

<Marker
    coordinate={ ... }
>
    <Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />

</Marker>

この場合、マーカーの数が多い（約50以上）と、マップのパフォーマンスが非常に低くなるため、この方法の使用は推奨されません

0
Bashirpour