React Native react-native-maps Mapview tidak muncul

Saya mencoba menggunakan peta asli reaksi Airbnb tetapi petanya tidak muncul di simulator. Kode saya tampaknya sama dengan kode lain yang telah menyelesaikan masalah tetapi simulator hanyalah layar putih kosong dengan batas merah. Tampilan Peta di luar kotak berfungsi tetapi saya ingin menggunakan versi Airbnb.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

export default class Haulr extends Component {
  render() {
    return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

AppRegistry.registerComponent('Haulr', () => Haulr);

reactjs maps native
person Conor Burke    schedule 17.12.2016    source sumber
comment
Apakah Anda berhasil memperbaikinya? Saat ini saya memiliki masalah yang sama :(   -  person Frank Lucas    schedule 02.03.2017
comment
Merasa ini berguna medium.com/@suchydan/   -  person Nishchit    schedule 08.05.2017

Jawaban (8)


arrow_upward
38
arrow_downward

Anda lupa menambahkan styles ke MapView:

<MapView

  style={styles.map}

  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

Jangan lupa untuk menentukan gaya Anda:

    const styles = StyleSheet.create({
      map: {
        ...StyleSheet.absoluteFillObject,
      },
});

Karena agar mapView berfungsi, Anda perlu menyetel gaya MapView ke posisi absolut dengan nilai atas, kiri, kanan, dan bawah ditetapkan. Seperti yang dinyatakan di repo

person Abdellah Alaoui    schedule 17.12.2016
comment
Ini tidak berhasil bagi saya. Saya mendapatkan layar putih dengan batas merah karena beberapa alasan - person Frank Lucas; 03.03.2017
comment
dapatkah Anda membagikan beberapa kode Anda? + platform apa yang Anda gunakan. P.S: Mungkin lebih baik menanyakan pertanyaan itu sekali lagi - person Abdellah Alaoui; 03.03.2017

arrow_upward
5
arrow_downward

  1. Buka Konsol Google Cloud Platform. https://cloud.google.com/console/google/maps-apis/overview

  2. Pilih proyek Anda dengan dropdown di bilah navigasi atas.

  3. Klik Menu dan buka "API & Layanan" > "Perpustakaan"

  4. Aktifkan "Maps SDK untuk Android" dan "Maps SDK untuk iOS".

  5. Kemudian buat kunci API baru dan tambahkan ke proyek Anda di AndroidManifest.xml di dalam tag <application>:

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>
person Uladzislau Ulasenka    schedule 10.04.2020

arrow_upward
0
arrow_downward

Saya telah mengacaukan kunci Google API saya, saya membuat ulang dan di konsol pengembang Google saya telah memasang kunci SHA dan berhasil.

person amit pandya    schedule 14.01.2020

arrow_upward
0
arrow_downward

Pastikan Anda menggunakan Kunci Android (dalam kasus saya, saya menggunakan kunci yang salah). Dalam kredensial, di dalam Google Cloud Platform, salin kunci Android dan lewati di AndroidManifest.xml.

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>
person MarckSi    schedule 10.04.2020

arrow_upward
0
arrow_downward

Anda harus memberi gaya pada MapView

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />

Di sini nilai flex adalah 1 sehingga peta terlihat di seluruh layar.

person Manan Gadhiya    schedule 22.01.2021

arrow_upward
-1
arrow_downward

Alasan Anda melihat kotak berbatas merah di sekitar peta kosong adalah karena kemungkinan besar di package.json, Anda harus menentukan versi >=0.12.4 dan BUKAN ^0.12.4 (yang berarti kompatibel dengan 0.12.4) . Jadi cari bagian dependencies dan ubah dari

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": "^0.12.4",
    ....
},

to

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": ">=0.12.4",
    ....
},

Kemudian, jalankan perintah berikut:

$ npm update
$ react-native link
$ cd ios
$ touch Podfile

Salin dan tempel Contoh Podfile ke File Pod. Ubah target dan simpan file. Lalu lari

$ pod install

Anda mungkin juga harus menambahkan atribut style ke MapView Anda:

<MapView style={styles.map}
   initialRegion={{
    ... 
   }}
/>

Kredit diberikan ke postingan ini Persetan dengan batas merah react-native-maps oleh AirBnb

person Kevin Le - Khnle    schedule 12.03.2017

arrow_upward
-1
arrow_downward

Saya mengalami masalah ini dan yang harus saya lakukan hanyalah mengkompilasi ulang proyek tersebut. Setelah saya melakukannya, batas merah hilang dan saya mendapatkan peta untuk dirender.

person chapeljuice    schedule 31.05.2017

arrow_upward
-1
arrow_downward

Solusi: aktifkan penagihan pada akun platform Google Cloud Anda.

Pada dasarnya Anda harus mengikuti panduan ini: https://docs.expo.io/versions/latest/sdk/map-view/

Kemudian, Anda harus mengaktifkan Maps SDK untuk Android (atau iOS) lalu mengaktifkan penagihan. Meskipun Maps SDK untuk Android benar-benar gratis, mereka menginginkan kartu kredit Anda. Setelah itu, ini akan berfungsi dengan baik.

person mr22    schedule 14.06.2021