地图视图(谷歌地图)中标注内的图像不会显示整个图像。
起初,标注中没有显示图像。所以我更改了代码,将图像放入 .现在图像已经存在,但我坚持显示整个图像以显示在标注内。
return (
<Marker key={index} coordinate={{latitude: shops.lat, longitude: shops.lng,
latitudeDelta: 0.007, longitudeDelta: 0.005}} image={require('../assets/images/pin1.png')}
>
<Callout style={{height:100, width:100}}>
<Text>{shops.name}</Text>
<Text className='bg-sky-100'>
<Image style={{width:90, height:90}} source={shops.image} />
</Text>
</Callout>
</Marker>
)
这是图片来源
image: require('../assets/images/purewater.png'),
尝试将道具
resizeMode={'contain'}
添加到您的 <Image />
并用 <Text>
替换 <View>
容器:
return (
<Marker key={index} coordinate={{latitude: shops.lat, longitude: shops.lng,
latitudeDelta: 0.007, longitudeDelta: 0.005}} image={require('../assets/images/pin1.png')}
>
<Callout style={{height:100, width:100}}>
<Text>{shops.name}</Text>
<View className='bg-sky-100'>
<Image resizeMode={'contain'} style={{width:90, height:90}} source={shops.image} />
</View>
</Callout>
</Marker>
)
这个解决方案对我有用。
<Marker key={index} coordinate={{
latitude: parseFloat(shop.shops.latitude), longitude: parseFloat(shop.shops.longitude),
latitudeDelta: 0.007, longitudeDelta: 0.005
}}
>
<Image source={require('../assets/images/pin1.png')} style={{ height: 30, width: 30 }} />
<Callout style={{ height: 150, width: 160 }}
onPress={() => navigation.navigate('Shop', { ...shop.shops })}
onPressOut={() => dispatch(emptyShopData())}
>
<Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'>
<Image resizeMode={'cover'} style={{ width: 150, height: 150 }}
src={
shop.shops.photo !== '' ?
PublicBaseURL + 'uploads/' + shop.shops.user_id + '/' + shop.shops.photo
: PublicBaseURL + 'assets/img/no-image.png'
} />
</Text>
<View className='flex-row'>
<Text className='font-bold'>{shop.shops.business_name} · </Text>
<Text className='text-sm text-green-600'>{shop.shops.distance.toFixed(1)} km</Text>
</View>
<Text className='italic text-sm'>Tap for more details</Text>
</Callout>
</Marker>
基本上需要手动调整以适应您的设置。 为
<Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'>
添加与标注大小相匹配的样式。最后,设置图像的样式<Image resizeMode={'cover'} style={{ width: 150, height: 150 }} src={...}
注意:我使用nativewind进行造型
图例:
h-36 w-36 -mt-24 mx-2
相当于
height: 144px,
width: 144px,
margin-top: -96,
margin-left: 8px,
margin-right: 8px