react-native - 地图始终位于搜索位置标记的中心
问题描述
当我输入代码时:region={this.props.region}
它可以工作并将地图居中在搜索的位置,但不允许在地图中选择其他标记......它总是回到搜索的位置,如果我取消这部分代码:region={this.props.region}
,我可以选择其他标记,但是当我搜索其他位置时,相机不会移动到所选位置。在这种情况下如何进行?
这是一些代码:
<MapView
provider="google"
style={styles.map}
//region={this.props.region}
initialRegion={this.state.focusedlocation}
ref={ref => (this.map = ref)}>
{this.renderMarkers()}
<MapView.Marker
onPress={this.pickLocationHandler}
coordinate={this.props.region}>
<Image source={markerImage} style={styles.icon} />
</MapView.Marker>
</MapView>
下面是为标记设置动画的代码:
pickLocationHandler = event => {
const coords = event.nativeEvent.coordinate;
console.log('Location picker Marker', coords);
this.map.animateToRegion({
...this.state.focusedlocation,
latitude: coords.latitude,
longitude: coords.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
解决方案
region
当你想控制地图的视口时使用。在您的情况下,您可以使用animateCamera
将地图移动到您搜索的位置。
this.map.animateCamera({
center: {latitude, longitude}
})
更新
地图视图.js
export default class MapView extends Component {
...
animateToLocation = (location) => {
this.map.animateToRegion({
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
}
...
render() {
return (
<View style={styles.container} {...this.props}>
...
)
}
}
地图容器.js
class MapContainer extends React.Component {
...
getCoordsFromName(loc) {
this.map.animateToLocation({
latitude: loc.lat,
longitude: loc.lng,
})
}
render() {
return (
<View style={{ flex: 1}}>
<MyMapView ref={ref => this.map = ref} region={this.state.region}/>
<MapInput style = {{flex: 1, position : 'absolute'}} notifyChange={loc => this.getCoordsFromName(loc)} />
</View>
);
}
}
推荐阅读
- python - 部分 HTML 对 Scrapy 不可见
- entity-framework - EF Core 一对多无限包括
- mysql - 在创建插入之前导入大量数据
- python - 运行python脚本后excel恢复错误
- git - GIT:远程:致命:内存不足,malloc 失败(试图分配 190135255 字节)
- visual-studio - VS UnitTesting a FileContentResult - 我可以在测试时生成文件吗
- android - 如何检查设备是否具有指纹功能,然后在 Android 中使用
- c++ - CMake 找不到库
- elasticsearch - 如何在 filebeat.yml 输入路径中指定 windows 临时文件夹 (%temp%)
- python-3.x - 如何通过从最小二乘线性拟合中提取系数来将多个光谱拟合到光谱中?