在 react-native-maps 上显示自定义图像作为标记

Question

我想在 react-native-maps 中将我的自定义图像显示为标记，如下所示，但它没有在地图上显示任何内容

<MapView
        style={{ flex: 1 }}
        region={this.state.region}
        ref={ref => { this.map = ref; }}
        zoomControlEnabled={true}
    >


        <MapView.Marker
            identifier="destination"
            coordinate={direction.destination}
            anchor={{ x: 0.5, y: 0.5 }}
        >
            <View style={{ width: 10, height: 10 }}>
                <Image source={require('../assets/images/destination-3.png')} style={{ width: 10, height: 10 }}/>
            </View>

        </MapView.Marker>
    </MapView>

我可以看到 <MapView.Marker> 中的任何元素，但 <Image/> 和 <ImageBackground> 除外。越来越麻烦了。

Answer 1

唯一对我有用的解决方案是使用 svg 表示在 svg 中渲染图像而不是直接通过反应本机图像渲染

   <Svg
            height="50"
            width="50"
            key={2000}
        >
            <Image
                key={200}
                width="90%"
                height="90%"
                href={require('../assets/images/destination-3.png')}
            />
        </Svg>

如果我想首先看到它，我已经在页面中渲染了两次以上运行!!!（并给出负的顶部和左侧的绝对位置以隐藏它）

Answer 2

我已经使用 GIMP（Linux Photoshop 的替代品）将我的图像最小化为图标大小（在 GIMP 中打开图像 -> 图像 -> 缩放 -> 给出你想要的大小。）我的代码是像这样

<MapView
      initialRegion={this.state.loc}
      region={this.state.loc}
      style={styles.map}     
      >
      <Marker coordinate={{
            latitude: 7.093546,
            longitude: 79.993703,}}
            image={require('./img/icon.png')} >
      </Marker>
</MapView>

希望这对您有所帮助..

在 react-native-maps 上显示自定义图像作为标记

show custom image as marker on react-native-maps

react-native

react-native-android

react-native-maps