React native 如何使用react native上的MapViewDirections使地图适合目标点?
如何使地图适合目的地? 我只需要将相机安装到目标点,而不是像今天这样同时安装到初始坐标和目标坐标。我该怎么做?用另一种方法来拟合坐标 {目的地&& { this.setState{duration:Math.floorresult.duration}; this.mapView.fittocoordinatsresult.coordinates{ 边缘添加:{ 右:getPixelSize10, 左:getPixelSize10, 顶部:getPixelSize10, 底部:getPixelSize50, }, 是的, }; }} /> {destination.title} {duration} 维亚吉姆节奏 {location} }React native 如何使用react native上的MapViewDirections使地图适合目标点?,react-native,google-maps,directions,React Native,Google Maps,Directions,如何使地图适合目的地? 我只需要将相机安装到目标点,而不是像今天这样同时安装到初始坐标和目标坐标。我该怎么做?用另一种方法来拟合坐标 {目的地&& { this.setState{duration:Math.floorresult.duration}; this.mapView.fittocoordinatsresult.coordinates{ 边缘添加:{ 右:getPixelSize10, 左:getPixelSize10, 顶部:getPixelSize10, 底部:getPixelSi
如果任何人都有一些与GooglePlacesAutocomplete一起工作的代码,那就太好了。假设您使用的是react native maps,您可以使用以下方法: animateToRegion:采用两个参数: 区域,具有经度、纬度、longitudeDelta、latitudeDelta的对象最后两个是相机与坐标的距离 duration,动画持续时间(以毫秒为单位) fitToCoordinates:采用两个参数: 坐标,要适合摄影机视图的坐标数组 选项:edgePadding视图周围应添加多少填充,设置动画,无论是否为此视图设置动画 这些方法需要在对地图的引用上调用,就像您在代码示例中所做的那样:this.mapView.fitToCoordinates
您可以使用许多方法将相机安装到目标点,这些方法可能比我上面描述的更适合您的用例。查看以了解更多信息。这是我的解决方案,我删除此动画的方法说明并替换: 添加此方法:
getCoordsFromName(loc) {
this.mapView.animateToRegion({
...this.state.region,
latitude: loc.lat,
longitude: loc.lng,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
this.setState(prevState => {
return {
region: {
...prevState.region,
latitude: loc.lat,
longitude: loc.lng,
},
};
});
}
因此:
<MapInput style = {{flex: 1, position : 'absolute'}} notifyChange={loc => this.getCoordsFromName(loc)} />
嗨,是的,我正在使用react本地地图。。。我知道可以使用这两个参数,但是如何设置上面的代码,只需放大目标点?感谢您上述两种方法允许您将焦点放在一个点或一组点上,并通过lon/lat Delta或edgePadding确定所需的缩放级别。如果这不能回答你的问题,请编辑你的帖子,并给予更多的澄清。干杯嗨,我用了你的方法,但我改变了搜索位置的方式,你帮我想了个主意,我把你的答案设置正确,因为这个。。。
getCoordsFromName(loc) {
this.mapView.animateToRegion({
...this.state.region,
latitude: loc.lat,
longitude: loc.lng,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
});
this.setState(prevState => {
return {
region: {
...prevState.region,
latitude: loc.lat,
longitude: loc.lng,
},
};
});
}
<MapInput style = {{flex: 1, position : 'absolute'}} notifyChange={loc => this.getCoordsFromName(loc)} />