Question

当用户尝试选择位置时，我想保持标记在地图上居中，同时围绕标记拖动地图，就像Uber所做的那样。下面的代码在IOS上可以正常使用，但是标记在Android上被隐藏了，我想如何为Android解决此问题？

<View style={styles.map}>
           <MapView
                region={this.getMapRegion()}
                 style={styles.map}
                 provider={PROVIDER_GOOGLE}
                 mapType="standard"
                 onRegionChangeComplete={(region) => this.setState({
                      atitude: region.latitude, longitude: region.longitude,
                      latitudeDelta: region.latitudeDelta, longitudeDelta: region.longitudeDelta
                        })} >
                        <View style={{
                            left: '50%',
                            marginLeft: -24,
                            marginTop: -48,
                            position: 'absolute',
                            top: '50%',}}>
                            <Image
                                style={{
                                    resizeMode: 'contain',
                                    height: 60, width: 60,
                            }} source={require('../../assets/fake-marker.png')} />
                        </View>
                    </MapView>
                </View>

Answer 1

您的代码在Android和IOS上应该可以正常工作，您只是犯了一个简单的错误，将自定义标记包装在MapView中，只需要将其移到外部即可，一切都会像个魅力。

Answer 2

我使用了类似的东西

<View style ={styles.container}>

        <MapView
            showsUserLocation
            showsMyLocationButton
            style={styles.map}
            onRegionChangeComplete={this.onRegionChange.bind(this)}
            region={this.state.region}

        >         
        </MapView>
        <View
        style={{ flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'}} pointerEvents="none">
          <Image style={styles.marker} source=require("./../../assets/pic/my_loc.png")} />
        </View>
   </View>

并使用这种样式`

[![container: {    
      flex:1,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    map: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    marker: {
      height: 48,
      width: 48,

    },`][1]][1]

React Native Maps Custom标记（Android）

2 个答案: