react native maps
v1.20.0
Komponen React Native Map untuk iOS + Android
Proyek ini dikelola oleh sekelompok kecil orang, dan bantuan apa pun terkait masalah dan permintaan penarikan selalu dihargai. Jika Anda mampu dan bersedia berkontribusi, silakan baca pedomannya.
Lihat Petunjuk Instalasi.
Lihat Petunjuk Penyiapan untuk Proyek Contoh yang Disertakan.
react-native >= 0.74 .react-native >= 0.64.3 . <MapView /> API Komponen
<Marker /> API Komponen
<Callout /> API Komponen
<Polygon /> API Komponen
<Polyline /> API Komponen
<Circle /> API Komponen
<Overlay /> API Komponen
<Heatmap /> API Komponen
<Geojson /> API Komponen
import MapView from 'react-native-maps' ;atau
var MapView = require ( 'react-native-maps' ) ;Komponen MapView ini dibangun sehingga fitur-fitur pada peta (seperti Marker, Poligon, dll.) ditetapkan sebagai turunan dari MapView itu sendiri. Ini memberikan API yang intuitif dan mirip reaksi untuk mengontrol fitur-fitur di peta secara deklaratif.
< MapView
initialRegion = { {
latitude : 37.78825 ,
longitude : - 122.4324 ,
latitudeDelta : 0.0922 ,
longitudeDelta : 0.0421 ,
} }
/ > getInitialState ( ) {
return {
region : {
latitude : 37.78825 ,
longitude : - 122.4324 ,
latitudeDelta : 0.0922 ,
longitudeDelta : 0.0421 ,
} ,
} ;
}
onRegionChange ( region ) {
this . setState ( { region } ) ;
}
render ( ) {
return (
< MapView
region = { this . state . region }
onRegionChange = { this . onRegionChange }
/ >
) ;
} import { Marker } from 'react-native-maps' ;
< MapView region = { this . state . region } onRegionChange = { this . onRegionChange } >
{ this . state . markers . map ( ( marker , index ) => (
< Marker
key = { index }
coordinate = { marker . latlng }
title = { marker . title }
description = { marker . description }
/ >
) ) }
< / MapView > ;png dengan berbagai resolusi (sebut saja custom_pin ) - untuk informasi lebih lanjut, buka Android, iOS < Marker
coordinate = { { latitude : latitude , longitude : longitude } }
image = { { uri : 'custom_pin' } }
/ > Catatan: Anda juga dapat meneruskan data biner gambar seperti image={require('custom_pin.png')} , tetapi skalanya tidak akan bagus dengan ukuran layar yang berbeda.
Catatan: Ini memiliki implikasi kinerja, jika Anda menginginkan solusi yang lebih sederhana gunakan gambar khusus (selamatkan diri Anda dari sakit kepala)
< Marker coordinate = { { latitude : latitude , longitude : longitude } } >
< MyCustomMarkerView { ... marker } / >
< / Marker > import { Callout } from 'react-native-maps' ;
< Marker coordinate = { marker . latlng } >
< MyCustomMarkerView { ... marker } / >
< Callout >
< MyCustomCalloutView { ... marker } / >
< / Callout >
< / Marker > ; < MapView initialRegion = { ... } >
< Marker draggable
coordinate = { this . state . x }
onDragEnd = { ( e ) => this . setState ( { x : e . nativeEvent . coordinate } ) }
/ >
< / MapView > import { UrlTile } from 'react-native-maps' ;
< MapView region = { this . state . region } onRegionChange = { this . onRegionChange } >
< UrlTile
/**
* The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
*/
urlTemplate = { this . state . urlTemplate }
/**
* The maximum zoom level for this tile overlay. Corresponds to the maximumZ setting in
* MKTileOverlay. iOS only.
*/
maximumZ = { 19 }
/**
* flipY allows tiles with inverted y coordinates (origin at bottom left of map)
* to be used. Its default value is false.
*/
flipY = { false }
/ >
< / MapView > ;Untuk Android: tambahkan baris berikut di AndroidManifest.xml Anda
< uses-permission android : name = " android.permission.INTERNET " />Untuk iOS: konfigurasikan Keamanan Transportasi Aplikasi di aplikasi Anda
Pustaka ini berfungsi dengan Fabric menggunakan Lapisan Interop Renderer Baru
Ada pesan peringatan bahwa langkah-langkah tersebut tidak diperlukan; tapi sejauh ini kami tidak bisa membuat contoh ini berfungsi tanpa mereka.
Buka file konfigurasi Anda : Temukan file react-native-config di direktori proyek Anda.
Tambahkan konfigurasi berikut : Sertakan array unstable_reactLegacyComponentNames untuk platform Android dan iOS seperti yang ditunjukkan di bawah ini:
module . exports = {
project : {
android : {
unstable_reactLegacyComponentNames : [
'AIRMap' ,
'AIRMapCallout' ,
'AIRMapCalloutSubview' ,
'AIRMapCircle' ,
'AIRMapHeatmap' ,
'AIRMapLocalTile' ,
'AIRMapMarker' ,
'AIRMapOverlay' ,
'AIRMapPolygon' ,
'AIRMapPolyline' ,
'AIRMapUrlTile' ,
'AIRMapWMSTile' ,
] ,
} ,
ios : {
unstable_reactLegacyComponentNames : [
'AIRMap' ,
'AIRMapCallout' ,
'AIRMapCalloutSubview' ,
'AIRMapCircle' ,
'AIRMapHeatmap' ,
'AIRMapLocalTile' ,
'AIRMapMarker' ,
'AIRMapOverlay' ,
'AIRMapPolygon' ,
'AIRMapPolyline' ,
'AIRMapUrlTile' ,
'AIRMapWMSTile' ,
] ,
} ,
} ,
} ;periksa proyek contoh untuk melihatnya beraksi.
Ubin dapat disimpan secara lokal di dalam perangkat menggunakan skema ubin xyz dan ditampilkan sebagai hamparan ubin juga. Hal ini berguna terutama untuk penggunaan peta offline ketika ubin tersedia untuk wilayah peta yang dipilih dalam penyimpanan perangkat.
import { LocalTile } from 'react-native-maps' ;
< MapView region = { this . state . region } onRegionChange = { this . onRegionChange } >
< LocalTile
/**
* The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
* For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
*/
pathTemplate = { this . state . pathTemplate }
/**
* The size of provided local tiles (usually 256 or 512).
*/
tileSize = { 256 }
/ >
< / MapView > ;Untuk Android: LocalTile masih berupa overlay pada petak peta asli. Artinya jika perangkat sedang online, ubin yang mendasarinya akan tetap diunduh. Jika pengunduhan/tampilan ubin asli tidak diinginkan, setel mapType ke 'tidak ada'. Misalnya:
<MapView
mapType={Platform.OS == "android" ? "none" : "standard"}
>
Lihat OSM Wiki untuk cara mengunduh ubin untuk penggunaan offline.
Tempatkan komponen yang ingin Anda overlay MapView di bawah tag penutup MapView . Posisikan elemen-elemen ini sepenuhnya.
render ( ) {
return (
< MapView
region = { this . state . region }
/ >
< OverlayComponent
style = { { position : "absolute" , bottom : 50 } }
/ >
) ;
} <MapView provider="google" googleMapId="yourStyledMapId" /> Google Maps di iOS dan Android mendukung penataan gaya melalui platform cloud google, peta yang ditata dipublikasikan di bawah googleMapId, cukup dengan menyetel properti googleMapId ke MapView Anda dapat menggunakannya peta bergaya info lebih lanjut di sini: id peta google
Komponen <MapView /> dan komponen turunannya mempunyai beberapa event yang dapat Anda langgani. Contoh ini menampilkan beberapa di antaranya dalam log sebagai demonstrasi.
Seseorang dapat mengubah posisi tampilan peta menggunakan referensi dan metode komponen, atau dengan meneruskan prop region yang diperbarui. Metode komponen akan memungkinkan seseorang untuk menganimasikan ke posisi tertentu seperti yang dapat dilakukan oleh API asli.
Komponen <MapView /> dapat dibuat berfungsi dengan API Animasi, dengan seluruh prop region dideklarasikan sebagai nilai animasi. Hal ini memungkinkan seseorang untuk menganimasikan zoom dan posisi MapView bersama dengan gerakan lainnya, memberikan kesan yang menyenangkan.
Selanjutnya, tampilan Marker dapat menggunakan API animasi untuk meningkatkan efeknya.
Masalah: Karena Android perlu merender tampilan markernya sebagai bitmap, API animasi mungkin tidak kompatibel dengan tampilan Marker. Tidak yakin apakah ini bisa diselesaikan atau tidak.
Koordinat penanda juga dapat dianimasikan, seperti yang ditunjukkan dalam contoh ini:
Sejauh ini, <Circle /> , <Polygon /> , dan <Polyline /> tersedia untuk diteruskan sebagai turunan ke komponen <MapView /> .
Polyline gradien dapat dibuat menggunakan prop strokeColors dari komponen <Polyline> .
Penanda default akan dirender kecuali penanda khusus ditentukan. Secara opsional, seseorang dapat menyesuaikan warna penanda default dengan menggunakan prop pinColor .
Pemanggilan ke penanda dapat berupa tampilan reaksi yang berubah-ubah, mirip dengan penanda. Hasilnya, mereka dapat berinteraksi seperti tampilan lainnya.
Selain itu, Anda dapat kembali ke perilaku standar yang hanya memiliki judul/deskripsi melalui properti <Marker /> title dan description .
Tampilan info khusus dapat berupa keseluruhan gelembung keterangan alat, atau hanya konten di dalam gelembung default sistem.
Untuk menangani pers pada subview info tertentu, gunakan <CalloutSubview /> dengan onPress . Lihat contoh Callouts.js .
Penanda dapat dikustomisasi hanya dengan menggunakan gambar, dan ditentukan menggunakan prop image .
Penanda dapat diseret, dan mengeluarkan peristiwa seret terus-menerus untuk memperbarui UI lainnya selama seret.
Aktifkan mode ringan di Android dengan liteMode prop. Ideal ketika memiliki banyak peta dalam Tampilan atau ScrollView.
Poi dapat diklik, Anda dapat melihat acara tersebut untuk mendapatkan informasinya (biasanya untuk mendapatkan detail lengkap dari Google Place menggunakan placeId).
MapView dapat menerima nilai AnimatedRegion sebagai prop region . Hal ini memungkinkan Anda memanfaatkan API Animasi untuk mengontrol pusat peta dan memperbesarnya.
import MapView , { AnimatedRegion , Animated } from 'react-native-maps' ;
getInitialState ( ) {
return {
region : new AnimatedRegion ( {
latitude : LATITUDE ,
longitude : LONGITUDE ,
latitudeDelta : LATITUDE_DELTA ,
longitudeDelta : LONGITUDE_DELTA ,
} ) ,
} ;
}
onRegionChange ( region ) {
this . state . region . setValue ( region ) ;
}
render ( ) {
return (
< Animated
region = { this . state . region }
onRegionChange = { this . onRegionChange }
/ >
) ;
} Penanda juga dapat menerima nilai AnimatedRegion sebagai koordinat.
import MapView , { AnimatedRegion , MarkerAnimated } from 'react-native-maps' ;
getInitialState ( ) {
return {
coordinate : new AnimatedRegion ( {
latitude : LATITUDE ,
longitude : LONGITUDE ,
} ) ,
} ;
}
componentWillReceiveProps ( nextProps ) {
const duration = 500
if ( this . props . coordinate !== nextProps . coordinate ) {
if ( Platform . OS === 'android' ) {
if ( this . marker ) {
this . marker . animateMarkerToCoordinate (
nextProps . coordinate ,
duration
) ;
}
} else {
this . state . coordinate . timing ( {
... nextProps . coordinate ,
useNativeDriver : true , // defaults to false if not passed explicitly
duration
} ) . start ( ) ;
}
}
}
render ( ) {
return (
< MapView initialRegion = { ... } >
< MarkerAnimated
ref = { marker => { this . marker = marker } }
coordinate = { this . state . coordinate }
/ >
< / MapView >
) ;
} import MapView , { Marker } from 'react-native-maps' ;
getInitialState ( ) {
return {
coordinate : {
latitude : LATITUDE ,
longitude : LONGITUDE ,
} ,
} ;
}
takeSnapshot ( ) {
// 'takeSnapshot' takes a config object with the
// following options
const snapshot = this . map . takeSnapshot ( {
width : 300 , // optional, when omitted the view-width is used
height : 300 , // optional, when omitted the view-height is used
region : { . . } , // iOS only, optional region to render
format : 'png' , // image formats: 'png', 'jpg' (default: 'png')
quality : 0.8 , // image quality: 0..1 (only relevant for jpg, default: 1)
result : 'file' // result types: 'file', 'base64' (default: 'file')
} ) ;
snapshot . then ( ( uri ) => {
this . setState ( { mapSnapshot : uri } ) ;
} ) ;
}
render ( ) {
return (
< View >
< MapView initialRegion = { ... } ref = { map => { this . map = map } } >
< Marker coordinate = { this . state . coordinate } / >
< / MapView >
< Image source = { { uri : this . state . mapSnapshot . uri } } / >
< TouchableOpacity onPress = { this . takeSnapshot } >
Take Snapshot
< / TouchableOpacity >
< / View >
) ;
}Berikan serangkaian pengidentifikasi penanda agar peta kembali fokus.
Berikan serangkaian koordinat untuk memfokuskan wilayah peta pada koordinat tersebut.
const styles = StyleSheet . create ( {
map : {
... StyleSheet . absoluteFillObject ,
} ,
} ) ; < MapView
style = { styles . map }
// other props
/ > Buruk:
< View >
< TextInput / >
< MapView / >
< / View >Bagus:
< View >
< MapView / >
< TextInput / >
< / View > Komponen yang tidak dideklarasikan oleh pustaka ini (Mis: Marker, Polyline) tidak boleh merupakan turunan dari komponen MapView karena metodologi rendering unik MapView. Tempatkan komponen/tampilan khusus Anda di luar komponen MapView dan posisikan secara absolut untuk memastikan komponen/tampilan tersebut hanya dirender ulang sesuai kebutuhan. Contoh: Buruk:
< View style = { StyleSheet . absoluteFillObject } >
< MapView style = { StyleSheet . absoluteFillObject } >
< View style = { { position : 'absolute' , top : 100 , left : 50 } } / >
< / MapView >
< / View >Bagus:
< View style = { StyleSheet . absoluteFillObject } >
< MapView style = { StyleSheet . absoluteFillObject } / >
< View style = { { position : 'absolute' , top : 100 , left : 50 } } / >
< / View >Sumber: #1901
<MapView> menggunakan Apple Maps di mapType: "standard" terkadang akan mogok saat Anda membuat aplikasi di latar belakang atau beralih ke aplikasi lain. Ini hanya masalah di XCode yang menggunakan Validasi API Logam, dan tidak akan terjadi dalam produksi. Untuk menghilangkan masalah ini bahkan saat melakukan debug di XCode, buka Edit Scheme... -> Run (Debug) -> Diagnostics dan hapus centang Metal -> API Validation . (h/t @Simon-TechForm).
Sumber: #3957 (komentar)
Jika perubahan status di onRegionChangeComplete dipanggil tanpa batas, tambahkan kondisi untuk membatasi panggilan ini terjadi hanya ketika perubahan wilayah dilakukan sebagai akibat dari tindakan pengguna.
onRegionChangeComplete = { ( region , gesture ) => {
// This fix only works on Google Maps because isGesture is NOT available on Apple Maps
if ( ! gesture . isGesture ) {
return ;
}
// You can use
dispatch ( { type : "map_region" , payload : { mapRegion : region }
