m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

react-nativeでgoogle mapを使用

react-nativeでgoogle mapを使用

環境

  • 開発マシンはmac mini
  • android側のみ
  • とりあえずやってみた

参考情報

【React Native】Googleマップを利用する(Android) - Ren's blog
React Nativeへ地図を表示する方法 - react-native-mapsライブラリを使ってReact Nativeへ地図を使う方法について調べてみます。
Get an API Key  |  Maps SDK for Android  |  Google Developers

google mapキーを取得

Google Cloud Platformへアクセスし、プロジェクトを新規に作成

f:id:m_shige1979:20201012210807p:plain

認証情報画面へ遷移

f:id:m_shige1979:20201012211114p:plain

認証情報を作成

f:id:m_shige1979:20201012211520p:plain

APIキーを取得

f:id:m_shige1979:20201012211624p:plain

確認

f:id:m_shige1979:20201013004146p:plain

※有料です

手順

プロジェクトの新規作成

npx react-native init SampleMap1
cd SampleMap1

react-native-mapsコンポーネントを追加

npm install --save react-native-maps
npm install @react-native-community/geolocation --save

APIキーを設定

app配下のAndroidManifest.xmlを編集

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.samplemap1">

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

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

      <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="もらったAPIキー" />

    </application>

</manifest>

App.jsを改修

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  Platform,
  StyleSheet,
  Button,
  Text,
  View,
  Dimensions,
} from 'react-native';
import MapView, { PROVIDER_GOOGLE, Region, Marker } from 'react-native-maps';
//import Geolocation, { GeolocationResponse } from '@react-native-community/geolocation';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922/4;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const places = {
  disneyland: {
    label: 'Disneyland',
    region: {
      latitude: 33.8120918,
      longitude: -117.9189742,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
    marker: {
      latlng: {
        latitude: 33.8120918,
        longitude: -117.9189742,
      },
      title: 'Disneyland',
      description: 'Theme park',
    },
  },
  universalstudio: {
    label: 'Universal Studio Hollywood',
    region: {
      latitude: 34.1381168,
      longitude: -118.3533783,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
    marker: {
      latlng: {
        latitude: 34.1381168,
        longitude: -118.3533783,
      },
      title: 'Universal Studio Hollywood',
      description: 'Film studio and theme park',
    },
  }
}

export default class App extends React.Component {

  inPlace2 = false;
  placeName = '';
  marker1;

  constructor(props){
    super(props);
    this.placeName = places.universalstudio.label;
    this.state = {
      region: places.universalstudio.region,
      marker: places.universalstudio.marker,
    };
  }

  movePlace(){
    this.marker1.hideCallout();
    if(this.inPlace2){
      this.placeName = places.universalstudio.label;
      this.setState({
        region: places.universalstudio.region,
        marker: places.universalstudio.marker,
      });
    }
    else{
      this.placeName = places.disneyland.label;
      this.setState({
        region: places.disneyland.region,
        marker: places.disneyland.marker,
      });
    }
    this.inPlace2 = !this.inPlace2;
  }

  render() {
    return (
      <View style={{flex:1}}>
        <MapView
          style={{flex:1}}
          region={this.state.region}
          provider={PROVIDER_GOOGLE} >
          <MapView.Marker
            ref={(ref)=>{this.marker1 = ref;}}
            coordinate={this.state.marker.latlng}
            title={this.state.marker.title}
            description={this.state.marker.description}
          />
        </MapView>
        <View style={{height:100,padding:16}}>
          <Text>{this.placeName}</Text>
          <Button title="Move" onPress={()=>this.movePlace()}/>
        </View>
      </View>
    );
  }
}

起動

npx react-native run-android

f:id:m_shige1979:20201013005940p:plain

気をつけること

  • MAP APIが有効でないと動かない