本文的使用https://medium.com/@clarkjohnson_85334/adding-fetched-markers-to-my-react-native-maps-app-5f068c7be14d ,我已经成功地将观察结果集成到我的 MapView 中。
mapMarkers = () => {
return this.state.items.map((item) => <Marker
key={item.id}
coordinate={{ latitude: item.geoLocation.latitude, longitude: item.geoLocation.longitude }}
title={item.acceptedVernacularName}
description={item.scientificName}
>
</Marker >)
}
但是,我还没有设法创建一个根据鸟的类型向标记添加不同图像的功能。是否有可能创建一个可以与需要字符串的 Marker image={} 属性一起使用的函数?我的想法是,图像应该使用 require('../assets/xx') 设置为本地镜像,但基于 id 或鸟的名称 (acceptedVernacularName)。
最佳答案
创建一个这样的函数来根据您的类型获取自定义图标
getIconFromType(type) {
var icon = require("../image_path/");
switch (type) {
case "A": icon = require("../image_path/image_a.png");
break
case "B": icon = require("../image_path/image_b.png");
break
default: icon = require("../image_path/image_b.png");
break
}
return icon
}
然后使用这种方式根据您的 ID 在标记中应用自定义图标
<Marker ...other props>
<Image source={this.getIconFromType(item.type)} resizeMode={'contain'} style={{ height: 30, width: 30 }} />
</Marker>
关于javascript - 向标记添加不同图像的功能 – React-native MapView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65221800/