React Native react-native-maps Mapview ไม่ปรากฏขึ้น

ฉันกำลังพยายามใช้ react-native-map ของ airbnb แต่แผนที่ไม่แสดงบนเครื่องจำลอง ดูเหมือนว่ารหัสของฉันจะเหมือนกับรหัสอื่น ๆ ที่สามารถแก้ไขปัญหาได้ แต่ตัวจำลองเป็นเพียงหน้าจอสีขาวว่างเปล่าที่มีขอบสีแดง Mapview ใช้งานได้ทันที แต่ฉันต้องการใช้เวอร์ชันของ 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 แหล่งที่มา
comment
คุณจัดการเพื่อแก้ไขปัญหานี้หรือไม่? ขณะนี้ฉันมีปัญหาเดียวกัน :(   -  person Frank Lucas    schedule 02.03.2017
comment
พบว่า มีประโยชน์นี้ medium.com/@uchydan/   -  person Nishchit    schedule 08.05.2017

คำตอบ (8)


arrow_upward
38
arrow_downward

คุณลืมเพิ่ม styles ใน MapView:

<MapView

  style={styles.map}

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

อย่าลืมกำหนดสไตล์ของคุณ:

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

เนื่องจากเพื่อให้ mapView ทำงานได้ คุณจะต้องตั้งค่ารูปแบบของ MapView ให้เป็นตำแหน่งที่แน่นอนโดยตั้งค่าด้านบน ซ้าย ขวา และล่าง ตามที่ระบุไว้ ใน repo

person Abdellah Alaoui    schedule 17.12.2016
comment
สิ่งนี้ใช้ไม่ได้สำหรับฉัน ฉันได้รับหน้าจอสีขาวที่มีขอบสีแดงด้วยเหตุผลบางประการ - person Frank Lucas; 03.03.2017
comment
คุณช่วยแบ่งปันโค้ดบางส่วนของคุณได้ไหม? + คุณใช้แพลตฟอร์มอะไร ป.ล. มันอาจจะดีกว่าที่จะถามคำถามอีกครั้ง - person Abdellah Alaoui; 03.03.2017

arrow_upward
5
arrow_downward

  1. ไปที่คอนโซลแพลตฟอร์ม Google Cloud https://cloud.google.com/console/google/maps-apis/overview

  2. เลือกโครงการของคุณด้วยเมนูแบบเลื่อนลงในแถบนำทางด้านบน

  3. คลิกที่เมนูและไปที่ "APIs & Services"> "Library"

  4. เปิดใช้งาน "Maps SDK สำหรับ Android" และ "Maps SDK สำหรับ iOS"

  5. จากนั้นสร้างคีย์ API ใหม่และเพิ่มลงในโปรเจ็กต์ของคุณใน AndroidManifest.xml ภายในแท็ก <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

ฉันมีปัญหากับคีย์ Google API ของฉัน ฉันสร้างใหม่และในคอนโซลนักพัฒนาซอฟต์แวร์ของ Google ฉันได้แนบคีย์ SHA แล้วและมันก็ใช้งานได้

person amit pandya    schedule 14.01.2020

arrow_upward
0
arrow_downward

ตรวจสอบให้แน่ใจว่าคุณใช้คีย์ Android (ในกรณีของฉันฉันใช้คีย์ผิด) ในข้อมูลรับรอง ภายใน Google Cloud Platform ให้คัดลอกคีย์ Android และวางไว้ใน 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

คุณต้องกำหนดสไตล์ให้กับ MapView

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

ค่าของเฟล็กซ์คือ 1 ดังนั้นแผนที่จึงมองเห็นได้เต็มหน้าจอ

person Manan Gadhiya    schedule 22.01.2021

arrow_upward
-1
arrow_downward

เหตุผลที่คุณเห็นกรอบสีแดงรอบๆ แผนที่ว่างนั้นเป็นเพราะว่ามีแนวโน้มมากใน package.json คุณจะต้องระบุเวอร์ชัน >=0.12.4 และไม่ใช่ ^0.12.4 (ซึ่งหมายความว่าเข้ากันได้กับ 0.12.4) . ดังนั้นให้มองหาส่วน dependencies และเปลี่ยนจาก

"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",
    ....
},

จากนั้นรันคำสั่งต่อไปนี้:

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

คัดลอกและวาง ตัวอย่าง Podfile ลงใน พอดไฟล์. เปลี่ยนเป้าหมายและบันทึกไฟล์ จากนั้นจึงวิ่ง

$ pod install

คุณอาจต้องเพิ่มแอตทริบิวต์ style ให้กับ MapView ของคุณ:

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

เครดิตไปที่โพสต์นี้ ช่างเถอะ ขอบสีแดงของ react-native-maps โดย AirBnb

person Kevin Le - Khnle    schedule 12.03.2017

arrow_upward
-1
arrow_downward

ฉันกำลังประสบปัญหานี้ และสิ่งที่ฉันต้องทำก็แค่คอมไพล์โปรเจ็กต์ใหม่ เมื่อฉันทำอย่างนั้น ขอบสีแดงก็หายไป และฉันก็ได้แผนที่มาเรนเดอร์

person chapeljuice    schedule 31.05.2017

arrow_upward
-1
arrow_downward

วิธีแก้ไข: เปิดใช้งานการเรียกเก็บเงินในบัญชีแพลตฟอร์ม Google Cloud ของคุณ

โดยพื้นฐานแล้ว คุณต้องปฏิบัติตามคำแนะนำนี้: https://docs.expo.io/versions/latest/sdk/map-view/

จากนั้น คุณต้องเปิดใช้งาน Maps SDK สำหรับ Android (หรือ iOS) จากนั้นจึงเปิดใช้งานการเรียกเก็บเงิน แม้ว่า Maps SDK สำหรับ Android จะให้บริการฟรี แต่พวกเขาก็ยังต้องการบัตรเครดิตของคุณ หลังจากนั้นมันจะทำงานได้ดี

person mr22    schedule 14.06.2021