如何在地图视图中显示不同的位置取决于所选的选取器？ （反应原生）

Posted 2023-02-23

【中文标题】如何在地图视图中显示不同的位置取决于所选的选取器？ （反应原生）

【英文标题】：How to show different location in Map Views depends on selected Picker? (React Native)

【发布时间】：2018-11-01 07:10:26

【问题描述】：

每个人。我正在构建一个关于在地图视图中显示不同位置的本机应用程序，这取决于所选的选择器。

我想通过检测字符串中包含的单词来使用条件语句，我使用string-contains 库来检测字符串中的一些单词。这是我的代码示例：

export default class App extends React.Component 
renderMap()
  if(contains(this.state.name, "Branch 1"))
            return <MapView
            initialRegion=
              latitude: 53.433980,
              longitude: -2.950960,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
         else if(contains(this.state.name, "Branch 2"))
           return <MapView
            initialRegion=
              latitude: 51.491610,
              longitude: -0.135560,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        
        else if(contains(this.state.name, "Branch 3"))
           return <MapView
            initialRegion=
              latitude: 53.461220,
              longitude: -2.269540,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        
        else if(contains(this.state.name, "Branch 4"))
           return  <MapView
            initialRegion=
              latitude: 51.262290,
              longitude: -1.081610,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            
            style=height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'
          ><MapView.Marker
          coordinate=
            latitude: 37.78825,
            longitude: -122.4324,
          
        /></MapView>;
        

render()
const branchesPicker = this.state.branches.map((item, branch_id)=> 
      return(
            <Picker.Item
            label=item.name
            value=item.address
            key=item.branch_id/>
        )
    );
      this.renderMap();
return(
<View style=styles.container>
      <Picker
          selectedValue=this.state.name
          mode="dropdown"
          style= height: 50, justifyContent: 'center', flex:4, alignItems: 'stretch', 
          onValueChange=(item)=> this.setState(name: item)>
        branchesPicker
    </Picker>
        this.renderMap()
      </View>

当我运行此代码时，选择器工作正常，但是当我尝试更改选择器时，地图并没有像我想象的那样改变。它只显示一个静态的地图视图（但地图视图并不总是来自分支 1，有时当我重新加载它时它会显示分支 2 或 3。但关键是，它没有改变......）

fyi，this.state.name 正在显示所选选择器的分支名称。

非常感谢您的帮助！这真的意味着很多..

【参考方案1】：

假设您使用的是 react-native-maps。

初始区域用于在第一次加载地图时渲染和显示位置。当或如果您想在加载后更改位置，您可以使用 animateToRegion 或许多其他类似的methods。因此，当您想在选择器中选择某物时更改地图上的位置时，只需使用您的输入调用这些方法即可。

这里是sn-p的代码供参考。

 this.map.animateToRegion( latitude: region.latitude, longitude: region.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta , timeToChangeRegionInMilliSeconds);