React-native：如何在反應原生地圖中顯示出點擊標記的工具提示

我正在使用react-native-maps module.I已經給出了緯度和長度的值，我用MapView.Marker來顯示點擊標記時標記和工具提示。React-native：如何在反應原生地圖中顯示出點擊標記的工具提示

但是，現在我想顯示最初加載地圖時出現的單擊標記的工具提示。

這是我的代碼在這裏：

<View style={styles.page}> 
     <MapView 
      ref="map" 
      style={styles.map} 
      region={this.state.region} 
      provider = {PROVIDER_DEFAULT} 
      zoomEnabled={true} 
      onRegionChange={this.onRegionChange.bind(this)} 
      pitchEnabled={true} 
      showsCompass={true} 
      liteMode={false} 
      showsBuildings={true} 
      showsTraffic={true} 
      showsIndoors={true} 
     > 
     <MapView.Marker 
     coordinate={this.state.marker.latlng} 
     title={this.state.marker.title} 
     description={this.state.marker.description} 
     image={require('./assets/pin.png')} 

    /> 

     </MapView> 
     </View>

任何一個可以幫助如何解決這個...

來源

2017-02-25 Lavaraju

我找不到任何種類的onLoad道具爲MapView的任何文件，所以我用onLayout而不是suggested here。您需要使用showCallout method作爲標記以顯示工具提示。爲此，請爲標記添加一個ref，然後可以在onLayout中爲MapView使用該標記。

<View style={styles.page}> 
    <MapView 
     ref="map" 
     style={styles.map} 
     region={this.state.region} 
     provider = {PROVIDER_DEFAULT} 
     zoomEnabled={true} 
     onRegionChange={this.onRegionChange.bind(this)} 
     pitchEnabled={true} 
     showsCompass={true} 
     liteMode={false} 
     showsBuildings={true} 
     showsTraffic={true} 
     showsIndoors={true} 
     onLayout={() => { this.mark.showCallout(); }} 
    > 
     <MapView.Marker 
      ref={ref => { this.mark = ref; }} 
      coordinate={this.state.marker.latlng} 
      title={this.state.marker.title} 
      description={this.state.marker.description} 
      image={require('./assets/pin.png')} 
     /> 
    </MapView> 
</View>

來源

2017-02-25 14:27:46

您好，感謝您的回覆，我正在使用您修改的代碼，但我有一個小錯誤。我怎麼寫onLayout（）函數，你可以給我建議 – Lavaraju

@Lavaraju你得到什麼錯誤？示例代碼應該按照原樣工作，因爲我在發佈前測試了它。 –

錯誤是找不到layout（）函數 – Lavaraju

可以使用自定義標註： https://github.com/airbnb/react-native-maps#custom-callouts

這裏是例子：

<MapView.Marker coordinate={marker.latlng}> 
    <MyCustomMarkerView {...marker} /> 
    <MapView.Callout> 
    <MyCustomCalloutView {...marker} /> 
    </MapView.Callout> 
</MapView.Marker>

請遵循反應，本機地圖自定義標註的例子： https://github.com/airbnb/react-native-maps/tree/master/example/examples

來源

2017-02-25 15:22:00

我不明白你的代碼。什麼是'MyCustomMarkerView'和'MyCustomCalloutView'應該看起來像？ –

@AnkushRish先生我沒有得到您的代碼 – Lavaraju

React-native：如何在反應原生地圖中顯示出點擊標記的工具提示

回答

相關問題