Показать кнопку внутри маркера карты? - PullRequest
Новая
       8

Показать кнопку внутри маркера карты?

0 голосов
/ 30 мая 2018

В настоящее время я разрабатываю собственное приложение реагирования с использованием модуля карты airbnb.

Моя карта содержит несколько маркеров, по которым я могу щелкнуть, чтобы открыть компонент MapView.Он содержит заголовок и описание.

Я хотел бы добавить кнопку к этому MapView, однако решение, которое я нашел , не работает.Я настраиваю его следующим образом (это часть return из моего компонента googlemap: 

return(
  <View style={styles.container}>

    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      customMapStyle={mapStyle}
      initialRegion={{
        latitude: 48.852968,
        longitude: 2.349902,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1
      }}
    >
      <MapView.Marker
        coordinate={{
          latitude: 48.852968,
          longitude: 2.349902
        }}
          title={ 'myTitle' }
          description={ 'myDescription' }
          pinColor={ 'blue' }
          onCalloutPress={() => alert('Clicked')}
      >
        <MapView.Callout>
          <View>
            <Text>Click Me!</Text>
          </View>
        </MapView.Callout>
      </MapView.Marker>

    </MapView>

  </View>
);

Что я хочу: 1- Показать мой синий маркер на карте (с использованием лат и lng) 2- Нажмите намаркер 3- Иметь небольшое всплывающее окно с названием, описанием и кнопкой «Нажми меня!» 4- Получи «Клик» в виде console.log

Что происходит вместо этого: 1- Показать мой синий маркер на карте(используя lat и lng) 2- Нажмите на маркер 3- У вас есть небольшая всплывающая кнопка «Click me!» (скорее как синяя ссылка, но я не знаю, как она должна отображаться) 4- Нет «Clicked» в моемconsole

Эта функция устарела? Или я что-то не так делаю? Я следовал решению и документации, но, возможно, что-то упустил.

Ответы [ 2 ]

0 голосов
/ 18 июня 2018

применить zIndex к вашей кнопке, которая будет отображаться на вашем просмотре карты

0 голосов
/ 30 мая 2018

Удалите onPress с вашей кнопки и добавьте его в маркер (см. После pincolor), попробуйте снова нажать кнопку. 

<MapView.Marker
    coordinate={{
        latitude: myLat,
        longitude: myLng
    }}
    title={ 'myTitle' }
    description={ 'myDescription' }
    pinColor={ 'blue' }
    onCalloutPress={() => alert('Clicked')}
>
    <MapView.Callout>
        <View>
            <Text>Click Me!</Text>
        </View>
    </MapView.Callout>
</MapView.Marker>

Это работает для меня.Надеюсь, это вам тоже поможет:)

...