谷歌地圖未在本機反應中顯示，只有谷歌徽標可見-有解無憂

我分配了正確的 Api 密鑰，為什么地圖沒有顯示？我 的 App.js 代碼

import MapView from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
     <MapView 
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的 android 模擬器顯示了這個結果

谷歌地圖未在本機反應中顯示，只有谷歌徽標可見

uj5u.com熱心網友回復：

將樣式添加到 MapView 并給出 absoluteFillObject。

MapView: {
    ...StyleSheet.absoluteFillObject,
    top: 10, //depends on your screen
    backgroundColor: 'transparent',
  }

uj5u.com熱心網友回復：

我在示例專案中嘗試了以下內容。請嘗試這樣 -

const App = () => {return (
  <MapView
      style={{flex: 1}}
      provider={PROVIDER_GOOGLE}
      minZoomLevel={6}
      onMapReady={() => {}}
  >
  
  </MapView>);};

請讓我知道這是否適合您。

uj5u.com熱心網友回復：

@ReactDev 你能試試這個代碼嗎？

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;


render() {
  return (
    <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
        />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/415406.html

標籤：

上一篇：凱撒密碼翻譯不正確

下一篇：請求位置權限僅在應用程式中斷時出現