react native mapsダウンロード - react native mapsソースコードのダウンロード

反応ネイティブマップ

iOS + Android 用の React Native Map コンポーネント

貢献する

このプロジェクトは少人数のグループによって維持されており、問題やプルリクエストに関するサポートをいつでも歓迎します。貢献する能力と意欲がある場合は、ガイドラインをお読みください。

インストール

インストール手順を参照してください。

付属のサンプルプロジェクトのセットアップ手順を参照してください。

互換性

リアクトネイティブの要件

バージョン 1.14.0 以降: react-native >= 0.74が必要です。
1.14.0 より前のバージョン: react-native >= 0.64.3が必要です。

コンポーネントAPI

<MapView />コンポーネント API

<Marker />コンポーネント API

<Callout />コンポーネント API

<Polygon />コンポーネント API

<Polyline />コンポーネント API

<Circle />コンポーネント API

<Overlay />コンポーネント API

<Heatmap />コンポーネント API

<Geojson />コンポーネント API

一般的な使用法

 import MapView from 'react-native-maps' ;

または

 var MapView = require ( 'react-native-maps' ) ;

この MapView コンポーネントは、マップ上のフィーチャ (マーカー、ポリゴンなど) が MapView 自体の子として指定されるように構築されています。これにより、マップ上のフィーチャを宣言的に制御するための直感的で反応に似た API が提供されます。

初期領域を使用してマップをレンダリングする

マップビュー

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

リージョンを状態として制御しながら MapView を使用する

 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画像を生成する必要があります (これらをcustom_pinと呼びます) - 詳細については、Android、iOS を参照してください。
すべての画像を Android ドローアブルと iOS アセットディレクトリに配置します
これで、次のコードを使用できるようになります。

 < Marker
  coordinate = { { latitude : latitude , longitude : longitude } }
  image = { { uri : 'custom_pin' } }
/ >

注: image={require('custom_pin.png')}のような画像バイナリデータを渡すこともできますが、これは画面サイズが異なると適切に拡張できません。

カスタムビューを使用したマーカーのレンダリング

注: これはパフォーマンスに影響します。より単純なソリューションが必要な場合は、カスタムイメージを使用してください (面倒なことは避けてください)。

 < 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 > ;

Android の場合: AndroidManifest.xml に次の行を追加します。

< uses-permission android : name = " android.permission.INTERNET " />

IOS の場合: アプリで App Transport Security を構成する

ファブリック/新しいアーキテクチャの React Native 構成

このライブラリは、新しいレンダラー相互運用レイヤーを使用してファブリックで動作します

これらの手順は必要ないという警告メッセージが表示されます。しかし、これまでのところ、これらがなければサンプルを動作させることができませんでした。

構成手順

設定ファイルを開きます。プロジェクトディレクトリで、 react-native-configファイルを見つけます。
次の構成を追加します。以下に示すように、Android プラットフォームと iOS プラットフォームの両方にunstable_reactLegacyComponentNames配列を含めます。

 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' ,
      ] ,
    } ,
  } ,
} ;

サンプルプロジェクトをチェックアウトして、実際の動作を確認してください。

ローカルタイルを使用したタイルオーバーレイ

タイルは、xyz タイルスキーマを使用してデバイス内にローカルに保存でき、タイルオーバーレイとしても表示できます。これは、デバイスストレージ内の選択したマップ領域でタイルが利用可能な場合に、オフラインマップを使用する場合に特に便利です。

 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 > ;

Android の場合: LocalTile はまだ元のマップタイルの上にオーバーレイされているだけです。これは、デバイスがオンラインの場合でも、基礎となるタイルがダウンロードされることを意味します。元のタイルのダウンロード/表示が望ましくない場合は、mapType を「none」に設定します。例えば：

 <MapView
  mapType={Platform.OS == "android" ? "none" : "standard"}
>

オフラインで使用するためにタイルをダウンロードする方法については、OSM Wiki を参照してください。

マップ上で他のコンポーネントをオーバーレイする

MapViewをオーバーレイするコンポーネントをMapView終了タグの下に配置します。これらの要素を絶対に配置します。

 render ( ) {
  return (
    < MapView
      region = { this . state . region }
    / >
    < OverlayComponent
      style = { { position : "absolute" , bottom : 50 } }
    / >
  ) ;
}

地図スタイルのカスタマイズ (Google マップのみ)

<MapView provider="google" googleMapId="yourStyledMapId" /> iOS および Android の Google マップは、Google クラウドプラットフォームを介したスタイル設定をサポートしており、スタイル付きの地図は googleMapId の下で公開されます。プロパティ googleMapId を MapView に設定するだけで、それを使用できます。スタイル付き地図の詳細はこちら: Google マップ ID

マップビューイベント

<MapView />コンポーネントとその子コンポーネントには、サブスクライブできるイベントがいくつかあります。この例では、デモンストレーションとしてログにそれらの一部を表示します。

地域/場所の追跡

プログラムによるリージョンの変更

refs メソッドとコンポーネントメソッドを使用するか、更新されたregionプロパティを渡すことによって、マップビューの位置を変更できます。コンポーネントメソッドを使用すると、ネイティブ API と同様に、特定の位置にアニメーション化できます。

地図のスタイルを変更する

マーカーとしての任意の React ビュー

アニメーション API での MapView の使用

<MapView />コンポーネントは、アニメーション化された API で動作するように作成でき、 regionプロパティ全体をアニメーション化された値として宣言できます。これにより、MapView のズームや位置を他のジェスチャとともにアニメーション化でき、快適な操作感が得られます。

さらに、マーカービューはアニメーション API を使用して効果を高めることができます。

問題: Android はマーカービューをビットマップとしてレンダリングする必要があるため、アニメーション API はマーカービューと互換性がない可能性があります。これを回避できるかどうかはまだわかりません。

次の例に示すように、マーカーの座標をアニメーション化することもできます。

ポリゴンクリエーター

その他のオーバーレイ

これまでのところ、 <Circle /> 、 <Polygon /> 、および<Polyline />を子として<MapView />コンポーネントに渡すことができます。

グラデーションポリライン (iOS MapKit のみ)

グラデーションポリラインは、 <Polyline>コンポーネントのstrokeColorsプロップを使用して作成できます。

デフォルトのマーカー

カスタムマーカーが指定されない限り、デフォルトのマーカーがレンダリングされます。必要に応じて、 pinColorプロップを使用してデフォルトのマーカーの色を調整できます。

カスタム吹き出し

マーカーへのコールアウトは、マーカーと同様に、完全に任意の反応ビューにすることができます。その結果、他のビューと同様に操作できます。

さらに、 <Marker />のtitleとdescription小道具を使用して、タイトル/説明だけを持つ標準の動作に戻すこともできます。

カスタム吹き出しビューは、ツールヒントのバブル全体、またはシステムのデフォルトのバブル内のコンテンツのみにすることができます。

コールアウトの特定のサブビューでの押下を処理するにはonPressで<CalloutSubview />を使用します。 Callouts.js例を参照してください。

画像ベースのマーカー

マーカーは画像を使用するだけでカスタマイズでき、 imageプロップを使用して指定できます。

ドラッグ可能なマーカー

マーカーはドラッグ可能で、ドラッグ中に継続的なドラッグイベントを発行して他の UI を更新します。

ライトモード (Android)

liteMode prop を使用して Android でライトモードを有効にします。 View または ScrollView に複数のマップがある場合に最適です。

ポイクリック時（Googleマップのみ）

ポイはクリック可能で、イベントをキャッチしてその情報を取得できます (通常は、placeId を使用して Google Place から詳細を取得します)。

アニメーション領域

MapView は、 AnimatedRegion値をそのregionプロパティとして受け入れることができます。これにより、アニメーション API を利用してマップの中心とズームを制御できるようになります。

 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 }
    / >
  ) ;
}

アニメーションマーカーの位置

マーカーは、 AnimatedRegion値を座標として受け入れることもできます。

 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 >
  ) ;
}

指定したマーカーにズームする

マップのフォーカスを再設定するには、マーカー識別子の配列を渡します。

指定した座標にズームする

座標の配列を渡して、その座標にマップ領域の焦点を合わせます。

トラブルシューティング

私の地図は空白です

反応ネイティブマップが正しくインストールされていることを確認してください。
問題に関する詳細情報がある場合は、ログを確認してください。
MapView のスタイルを上、左、右、下の値を設定して絶対位置に設定してみてください。
Google デベロッパーコンソールで Google Maps API が有効になっていることを確認してください

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

 < MapView
  style = { styles . map }
  // other props
/ >

入力が集中しない

入力がフォーカスされない場合、または要素がタップに応答しない場合は、ビュー階層の順序を確認してください。場合によっては、レンダリングされたコンポーネントの順序が問題である可能性があります。MapView を最初のコンポーネントとして配置することを推奨します。

悪い：

 < View >
  < TextInput / >
  < MapView / >
< / View >

良い：

 < View >
  < MapView / >
  < TextInput / >
< / View >

子コンポーネントが再レンダリングされない

MapView の独自のレンダリング方法により、このライブラリで宣言されていないコンポーネント (例: マーカー、ポリライン) を MapView コンポーネントの子にすることはできません。カスタムコンポーネント/ビューを MapView コンポーネントの外側に配置し、必要な場合にのみ再レンダリングされるように絶対位置に配置します。例: 悪い:

 < View style = { StyleSheet . absoluteFillObject } >
  < MapView style = { StyleSheet . absoluteFillObject } >
    < View style = { { position : 'absolute' , top : 100 , left : 50 } } / >
  < / MapView >
< / View >

良い：

 < View style = { StyleSheet . absoluteFillObject } >
  < MapView style = { StyleSheet . absoluteFillObject } / >
  < View style = { { position : 'absolute' , top : 100 , left : 50 } } / >
< / View >

出典: #1901

アプリを切り替えると iOS で EXC_BAD_ACCESS が発生してクラッシュする

mapType: "standard"で Apple Maps を使用する<MapView> 、アプリをバックグラウンドで実行するか、別のアプリに切り替えるとクラッシュすることがあります。これは、Metal API Validation を使用する XCode でのみ問題となり、運用環境では発生しません。 XCode でのデバッグ中でもこの問題を解決するには、 Edit Scheme... -> Run (Debug) -> Diagnostics 、 Metal -> API Validationチェックを外します。 (h/t @Simon-TechForm)。

出典: #3957 (コメント)

onRegionChangeComplete() コールバックが無限に呼び出されます

onRegionChangeCompleteでの状態の変更が無限に呼び出される場合は、ユーザーのアクションの結果として領域変更が行われた場合にのみこれらの呼び出しが発生するように制限する条件を追加します。

 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 }

拡大する

react native maps

反応ネイティブマップ

貢献する

インストール

互換性

リアクトネイティブの要件

コンポーネントAPI

一般的な使用法

初期領域を使用してマップをレンダリングする

マップビュー

リージョンを状態として制御しながら MapView を使用する

地図上にマーカーのリストをレンダリングする

カスタム イメージを使用したマーカーのレンダリング

カスタムビューを使用したマーカーのレンダリング

カスタム コールアウトを使用したカスタム マーカーのレンダリング

ドラッグ可能なマーカー

カスタム タイル オーバーレイの使用

タイルサーバーを使用したタイルオーバーレイ

ファブリック/新しいアーキテクチャの React Native 構成

構成手順

ローカル タイルを使用したタイル オーバーレイ

マップ上で他のコンポーネントをオーバーレイする

地図スタイルのカスタマイズ (Google マップのみ)

マップビューイベント

地域/場所の追跡

プログラムによるリージョンの変更

地図のスタイルを変更する

マーカーとしての任意の React ビュー

アニメーション API での MapView の使用

ポリゴンクリエーター

その他のオーバーレイ

グラデーション ポリライン (iOS MapKit のみ)

デフォルトのマーカー

カスタム吹き出し

画像ベースのマーカー

ドラッグ可能なマーカー

ライトモード (Android)

ポイクリック時（Googleマップのみ）

アニメーション領域

アニメーションマーカーの位置

地図のスナップショットを撮る

指定したマーカーにズームする

指定した座標にズームする

トラブルシューティング

私の地図は空白です

入力が集中しない

子コンポーネントが再レンダリングされない

アプリを切り替えると iOS で EXC_BAD_ACCESS が発生してクラッシュする

onRegionChangeComplete() コールバックが無限に呼び出されます

カスタムイメージを使用したマーカーのレンダリング

カスタムコールアウトを使用したカスタムマーカーのレンダリング

カスタムタイルオーバーレイの使用

ローカルタイルを使用したタイルオーバーレイ

グラデーションポリライン (iOS MapKit のみ)