如何在Airbnb地圖中顯示標註？

我有一個標記的靜態地圖，並希望始終顯示標記標註。如何在Airbnb地圖中顯示標註？

一些人建議使用MapView的onLayout，但是這一段時間不起作用。

我試圖用onRegionChangeComplete有時工作（它被調用一次或兩次）來解決，但在約10％的情況下，它陷在一個循環，並得到一次又一次的調用，直到應用程序崩潰。這隻發生在iOS上。

這是我的代碼

setMarkerRef = (ref) => { 
    this.marker = ref 
} 

showCallout =() => { 
    this.marker.showCallout() 
} 

render() { 

... 

    <MapView 
    style={{...StyleSheet.absoluteFillObject}} 
    region={{ 
     latitude: latitude, 
     longitude: longitude, 
     latitudeDelta: 0.00922, 
     longitudeDelta: 0.00421, 
    }} 
    showsMyLocationButton={false} 
    showsCompass={false} 
    showsTraffic={false} 
    zoomEnabled={false} 
    rotateEnabled={false} 
    scrollEnabled={false} 
    pitchEnabled={false} 
    onRegionChangeComplete={this.showCallout} 
    onPress={this.openMap} 
    > 
    <MapView.Marker 
     coordinate={{ 
     latitude: latitude, 
     longitude: longitude, 
     }} 
     title={address} 
     ref={this.setMarkerRef} 
    /> 
    </MapView>

任何想法有什麼錯我的做法？有沒有人有更好的解決方法？

編輯：我希望組件看起來像這樣，而不需要用戶交互。只需顯示地圖，標記和標註。

來源

2017-05-12 Viktor Seč

我不能完全確定你想要做什麼。你能解釋一下嗎？您是否嘗試渲染固定在地圖中心的標註？ –

嗨，@開文黃我給我的問題添加了圖片。我不希望用戶必須與地圖交互，只需在已打開標註的情況下將其顯示給他們。 –

啊。因此，您的地圖也會停用滾動功能。所以，每當你更新經緯度時，你都希望標記和標註顯示在該座標上，對嗎？ –

既然你呈現不打算部位變更的固定地圖，沒有必要給你聽regionChangeComplete。由於其行爲並不一致，因此這不是一件有趣的事情。

initialRegion可用於顯示您的地圖。或者，如果您想要更多花式動畫，請嘗試使用MapViewanimateToRegion。

無論如何，所有你需要聽的是componentDidMount。

我懷疑你的refs代碼可能是錯誤的，但無論如何這對我很有用。

componentDidMount() { 
    this.refs['mymarker'].showCallout() 
} 

render() { 
    return (
    <MapView> 
     <MapView.Marker 
     coordinate={YOUR_COORDINATES} 
     title='my callout' 
     ref='mymarker'> 
     </MapView.Marker> 
    </MapView> 
) 
}

如果您仍然有問題，也可能是您的title道具在MapView.Marker未接收到address你逝去的時候在被showCallout叫。在這種情況下，呼叫不會呈現。

更新答：（好像上面沒有爲蘋果地圖的工作）

render() { 
    return (
    <MapView 
     onLayout={() => this.refs["mymarker"].showCallout()}> 
     <MapView.Marker 
     coordinate={YOUR_COORDINATES} 
     title='my callout' 
     ref='mymarker'> 
     </MapView.Marker> 
    </MapView> 
) 
}

來源

2017-05-12 12:19:36

凱文非常感謝你的回答。不幸的是，你的代碼不適合我。地圖和標記得到渲染，標註沒有。我使用react-native-0.42.3與react-native-maps 0.15.0。在iOS 10.3上使用Apple Maps進行測試。如果有幫助，我可以共享整個組件代碼。 –

好吧我測試了我的代碼在GoogleMaps上工作，但標註不顯示在Apple地圖上。但是，在將其更改爲偵聽onLayout而不是componentDidMount後，它可以在GoogleMaps和Apple地圖上運行。讓我更新答案，並看看它是否適用於更新後的答案。否則，請顯示您的整個組件 –

嗨！我無法更快檢查。您的解決方案在我的測試中仍然無法正常工作。這是我的組件代碼（根據您的答案更改）：https：//pastebin.com/0S1fncCC。地圖在渲染時開始跳躍。 –

如何在Airbnb地圖中顯示標註？

回答

相關問題