react-native - 如何在 React Native MapView 中选择默认的谷歌地图标记?或者,您如何不显示默认的 Google 地图标记?
问题描述
我有一个地图视图,我在其中呈现三种类型的标记:访问、书签和喜欢。
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
initialRegion={region}
showsUserLocation={true}
ref={mapRef}
>
{/* <View style={{ paddingLeft: '5%', paddingBottom: '1%', height: '18%', width: '100%', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-end' }}> */}
<View style={{ paddingLeft: '5%', height: '18%', flexDirection: 'column'}}>
<View style={{ flexDirection: 'row', paddingTop: '24%' }}>
{profileUser && followers.length > 0 && <FollowerPicture user={profileUser} /> }
{followers.map(follower => {
return (
<FollowerPicture key={follower.profileUri} user={follower} />
)
})}
</View>
{data && <TouchableOpacity onPress={filter} style={{
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 5,
shadowOpacity: 0.3,
alignSelf: 'flex-end',
marginTop: '3%',
marginRight: '5%',
backgroundColor: colors.white1, height: 40,
width: 40,
borderRadius: 40,
justifyContent: 'center',
alignItems: 'center'
}}>
<FontAwesome name="filter" size={24} color={colors.black2} />
</TouchableOpacity>}
</View>
{visits.map(visit => {
const restaurant = visit.restaurant;
return(
<MapView.Marker
key={restaurant.id.toString().concat(restaurant.__typename)}
coordinate={{ latitude: restaurant.latitude, longitude: restaurant.longitude }}
title={restaurant.name}
pinColor={colors.green1}
onPress={(e) => {
pressMarker(e, restaurant.id)
}}
/>
)
})}
{bookmarks.map(bookmark => {
const restaurant = bookmark.restaurant;
return(
<MapView.Marker
key={restaurant.id.toString().concat(restaurant.__typename)}
coordinate={{ latitude: restaurant.latitude, longitude: restaurant.longitude }}
title={restaurant.name}
pinColor={colors.blue2}
onPress={(e) => {
pressMarker(e, restaurant.id)
}}
/>
)
})}
{likes.map(like => {
const restaurant = like.restaurant;
return(
<MapView.Marker
key={restaurant.id.toString().concat(restaurant.__typename)}
coordinate={{ latitude: restaurant.latitude, longitude: restaurant.longitude }}
title={restaurant.name}
pinColor={colors.red1}
onPress={(e) => {
pressMarker(e, restaurant.id)
}}
/>
)
})}
</MapView>
但是,在地图中,其他标记也是可见的。这些标记是 Google 地图默认显示的默认标记。您放大地图的次数越多,这些标记出现的次数就越多。
这就是地图的样子。红色和蓝色标记是我的标记。代表 IHOP、Veselka、Venier's Pasticceria & Caffe 等的标记是 Google Maps 的默认标记。
我的问题有两个:
- 如何选择这些默认的 Google 地图标记?我尝试使用诸如 onPress 或 onMarkerSelect 之类的 MapView 方法,但是当我点击默认标记时没有事件触发器。
- 如何删除这些默认的 Google 地图标记?
非常感谢!!
解决方案
推荐阅读
- sorting - 理解字典排序
- java - macOS 通过双击启动 jar 文件
- reactjs - Input Date Value Not Updating With Moment
- python - PyGreSQL AWS Glue Python
- vue.js - VueJS/Vuetify:用动画/过渡改变 colwidth
- oop - 为什么以及何时应该使用类型转换?
- html - 如果高度可用,则将项目垂直堆叠成一行
- java - JBoss 5 到 jboss 7 迁移指南
- flutter - ScrollView 内的 TabView 渲染错误 - Flutter
- python - AttributeError:模块 'ssl' 没有属性 'PROTOCOL_TLSv1'