第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Native Map View 初始渲染

React Native Map View 初始渲染

慕森王 2021-11-04 15:20:43
我正在通過以下屏幕為單個帖子加載帶有標(biāo)記的地圖。下面的這段代碼很完美,它在地圖上顯示標(biāo)記,并且地圖視圖圓圈也出現(xiàn)在與標(biāo)記相同的位置。問題:我想將 initialRegion 設(shè)置為標(biāo)記坐標(biāo),以便地圖位于標(biāo)記所在的正確位置。我試過用posts.lat 和posts.lng 設(shè)置initialRegion 緯度和經(jīng)度,就像我對mapview 圓所做的那樣,但這不適用于初始區(qū)域。只有一個標(biāo)記從 API 加載,因為這是一個單獨的帖子屏幕componentDidMount() {    this.getPosts();  }  getPosts() {    axios      .get('myAPI')      .then(response => {        this.setState({          post: response.data,          loading: false        });      });}render() {const posts = (this.state ?? this.state.posts) ? this.state.posts :     return (      <MapView style={styles.map}              initialRegion={{                  latitude: 43.660192,                  longitude: -79.425250,                  latitudeDelta: 0.04,                  longitudeDelta: 0.05,              }}            ><MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} /><MapView.Circle            center={{              latitude: posts.lat,              longitude: posts.lng,            }}            radius={150}            strokeWidth={2}            strokeColor="#3399ff"            fillColor="rgba(102,204,153,0.2)" />          </MapView>);  }
查看完整描述

2 回答

?
白豬掌柜的

TA貢獻1893條經(jīng)驗 獲得超10個贊

問題是,目前,您的地圖將在您為 pin 坐標(biāo)發(fā)出 API 請求之前呈現(xiàn)。如果這是使用 react-native-maps,他們的文檔指出在初始渲染后更改 initialRegion 不會導(dǎo)致地圖更改:


在組件安裝后更改 [the initialRegion] 屬性不會導(dǎo)致區(qū)域更改。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md


您需要:


等到您有 API 響應(yīng)來渲染地圖,或者

使用初始區(qū)域的估計值渲染地圖,并在 API 調(diào)用完成且狀態(tài)更新后更新地圖位置。

選項1:


if (this.state.loading) {

  // Better loading logic here

  return <Text>Loading...</Text>

}


return (

  <MapView 

    style={styles.map}

    initialRegion={{

      latitude: posts.lat,

      longitude: posts.lng,

      latitudeDelta: 0.04,

      longitudeDelta: 0.05,

    }}

  >

  </MapView>

);

第二種選擇:


// You need to add region to state.

getPosts() {

    axios

      .get('myAPI')

      .then(response => {

        this.setState({

          post: response.data,

          region: {

            latitude: response.data.lat,

            longitude: response.data.long,

            latitudeDelta: 0.04,

            longitudeDelta: 0.05,

          }

          loading: false

        });

      });

}


render() {

  return (

    <MapView 

      style={styles.map}

      initialRegion={{

        latitude: posts.lat,

        longitude: posts.lng,

        latitudeDelta: 0.04,

        longitudeDelta: 0.05,

      }}

      region={this.state.region}

    >

      ...

    </MapView>

  );

}

加分項:如果您使用animateToRegion. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods


希望這可以幫助!


查看完整回答
反對 回復(fù) 2021-11-04
?
aluckdog

TA貢獻1847條經(jīng)驗 獲得超7個贊

我以前遇到過這個問題,我像這樣修復(fù)了它們。

首先,您應(yīng)該在導(dǎo)航到地圖視圖之前獲取遠程數(shù)據(jù)。
并且您應(yīng)該使用道具或?qū)Ш絽?shù)將 latlng 數(shù)據(jù)發(fā)送到 MapView。

其次,您應(yīng)該initialRegion通過傳遞的數(shù)據(jù)進行設(shè)置。


查看完整回答
反對 回復(fù) 2021-11-04
  • 2 回答
  • 0 關(guān)注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號