将自定义图像显示为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

我使用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>

希望这可以帮助..

Answer 2

对我有用的唯一解决方案是使用svg意味着渲染svg里面的图像渲染的反射原生Image直接

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

如果我想看到它第一次运行!!!我已经在页面中渲染了这个svg超过两次了（并且给予负顶部和左侧绝对位置以隐藏它）