こんにちは。現在ReactNativeについて、ExpoのLocationを使って現在地の地図を取得したいと思っております。目的は2つあり、1つ目は地図上の保育園のマップを取得すること、2つ目はアプリを開いたとき(もしくは何かしらボタンを押したとき)に現在地のマップを表示することです。一つ目はボタンを押したときに実現できております。しかし、ユーザーの現在地でそれを行いたいと思っておりますので2つ目の仕様も加えたいです。
試したこと
MapView内のinitialRegion内に何か現在地を取得できる関数を入れたら現在地を取得できるのかなとは思っておりますが・・とりあえず現在の値は東京駅に設定しております。
App
1import React from 'react'; 2import { StyleSheet, Text, View,TouchableOpacity } from 'react-native'; 3import MapView from 'react-native-maps'; 4import {point} from '@turf/helpers'; 5import destination from '@turf/destination'; 6 7export default class App extends React.Component { 8 constructor(props) { 9 super(props) 10 this.state = { 11 elements: [], 12 south:null, 13 west:null, 14 north:null, 15 east:null, 16 17 } 18 } 19 20 //地図の画面が変更されるたびにbboxを計算 21 onRegionChangeComplete = (region) => { 22 //111キロメートルから中心点から縦幅、横幅を計算 23 const center = point([region.longitude, region.latitude]) 24 const verticalMeter = 111 * region.latitudeDelta / 2 25 const horizontalMeter = 111 *region.longitudeDelta / 2 26 //実際の距離を計算 27 const options = {units: 'kilometers'} 28 const south = destination(center,verticalMeter,180,options) 29 const west = destination(center,horizontalMeter,-90,options) 30 const north = destination(center,verticalMeter,0,options) 31 const east = destination(center,horizontalMeter,90,options) 32 //計算結果(GeoJson)からbboxを保存する 33 this.setState({ 34 south:south.geometry.coordinates[1], 35 west:west.geometry.coordinates[0], 36 north:north.geometry.coordinates[1], 37 east:east.geometry.coordinates[0], 38 }) 39 } 40 41 fetchToilet = async () => { 42 const south = this.state.south 43 const west = this.state.west 44 const north = this.state.north 45 const east = this.state.east 46 //テンプレートリテラルを使ってbboxを展開 47 const body = ` 48 [out:json]; 49 ( 50 node 51 [amenity=kindergarten] 52 (${south},${west},${north},${east}); 53 54 ); 55 out; 56 ` 57 58 //fetch関数に渡すoptionを指定 59 const options = { 60 method: 'POST', 61 body: body 62 } 63 64 //fetch関数でOverpass APIのエントリポイントにアクセスし、取得したJSONを保存 65 try { 66 const response = await fetch('https://overpass-api.de/api/interpreter',options) 67 const json = await response.json() 68 this.setState({elements: json.elements}) 69 }catch (e) { 70 console.log(e) 71 72 } 73} 74 render() { 75 return ( 76 <View style ={styles.container}> 77 <MapView 78 onRegionChangeComplete={this.onRegionChangeComplete} 79 style={styles.mapView} 80 initialRegion={{ 81 latitude: 35.681236, 82 longitude: 139.767125, 83 latitudeDelta: 0.02, //小さくなるほどズーム 84 longitudeDelta: 0.02, 85 }}> 86 87 { 88 this.state.elements.map((element) =>{ 89 90 let title= "保育園" 91 if (element.tags["name"] !==undefined) { 92 title = element.tags["name"] 93 } 94 return (<MapView.Marker 95 coordinate={{ 96 latitude: element.lat, 97 longitude: element.lon, 98 }} 99 title={title} 100 key={"id_" + element.id} 101 />) 102 }) 103 104 } 105 106 </MapView> 107 108 109 <View style ={styles.buttonContainer}> 110 <TouchableOpacity 111 onPress={() => this.fetchToilet()} 112 style={styles.button} 113 > 114 <Text style={styles.buttonItem}>保育園取得</Text> 115 </TouchableOpacity> 116 </View> 117 </View> 118 119 ); 120 } 121} 122 123const styles = StyleSheet.create({ 124 125 container: { 126 flex: 1, 127 backgroundColor:'#fff', 128 alignItems: 'center', 129 justifyContent: 'flex-end', 130 131 }, 132 133 mapView: { 134 ...StyleSheet.absoluteFillObject, 135 }, 136 137 138 139 buttonContainer: { 140 flexDirection:'row', 141 marginVertical:20, 142 backgroundColor:'transparent', 143 alignItems:'center', 144 }, 145 146 button: { 147 width:150, 148 alignItems:'center', 149 justifyContent:'center', 150 backgroundColor:'rgba(255,235,255,0.7)', 151 paddingHorizontal:18, 152 paddingVertical:12, 153 borderRadius:20, 154 }, 155 156 buttonItem: { 157 textAlign:'center', 158 }, 159 160 161 });
大変お手数ですが、分かる方ご協力よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。