使用粘性和多个标注来响应本机地图-与Uber应用相同

Question

我想有多个标注，它们总是以与Uber出租车应用程序相同的方式打开。

我想要的标准是

• 多个标注
• 可以按下标注

我有两种解决方法。 一个是始终在引用安装后将其设置为按参考打开，但一次只能提供一个活动的标注。 第二，我使用具有绝对位置的自定义标记，并将TouchableOpacity用作子代。我可以显示多个，但是无法按下嵌套在<MapView.Marker>中的按钮。

Answer 1

一段时间以来，我一直在同一个问题上挣扎。其实这就是我偶然发现这个问题的方式。我想分享我最终得到的。显然，我们可以在Marker组件中放置任何内容，因此在其中放置View和Image可以达到目的：

    <Marker coordinate={coords} style={styl.customMarker}>
      <View style={styl.addressBox}>
        <TouchableOpacity onPress={() => console.log('Click!')}>
          <Text numberOfLines={2} style={styl.addressText}>
            Some location address goes here
          </Text>
        </TouchableOpacity>
      </View>
      <Image source={require('../assets/locationPin.png')} />
    </Marker>

    const styl = StyleSheet.create({
      customMarker: {
        justifyContent: 'center',
        alignItems: 'center'
      },
      addressBox: {
        width: 150,
        height: 45,
        backgroundColor: '#fff',
        paddingVertical: 5,
        paddingHorizontal: 7,
        borderRadius: 5,
        borderWidth: 0.5,
        borderColor: '#ccc',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.3,
        shadowRadius: 5,
        elevation: 3
      },
      addressText: {
        textDecorationLine: 'underline'
      }
    }); 

外观如下：

这是Grab（Uber替代）实现。但是您可以尝试使用View和Image样式来获得类似Uber的结果。

希望这对以后的人有所帮助。干杯！