地图始终以搜索到的位置标记为中心
Map is always centered in the searched location marker
当我输入代码时:region={this.props.region}
它起作用并将地图置于搜索位置的中心,但不允许 select 地图中的其他标记...它总是回到搜索位置,如果我去掉这部分代码:region={this.props.region}
,我可以 select 其他标记,但是当我搜索其他位置时,相机不会移动到所选位置。在这种情况下如何进行?
这是一些代码:
<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}
})
更新
地图-view.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}>
...
)
}
}
地图-container.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>
);
}
}
当我输入代码时:region={this.props.region}
它起作用并将地图置于搜索位置的中心,但不允许 select 地图中的其他标记...它总是回到搜索位置,如果我去掉这部分代码:region={this.props.region}
,我可以 select 其他标记,但是当我搜索其他位置时,相机不会移动到所选位置。在这种情况下如何进行?
这是一些代码:
<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}
})
更新
地图-view.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}>
...
)
}
}
地图-container.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>
);
}
}