地図表示機能の改善

2022-07-28 02:56:56 +09:00
parent 9331af9167
commit 6b280a51d7
4 changed files with 97 additions and 76 deletions
--- a/components/trainMenu.js
+++ b/components/trainMenu.js
@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {View,Text,TouchableOpacity } from 'react-native';
+import {WebView} from 'react-native-webview';
+import StatusbarDetect from '../StatusbarDetect';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps';
+import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+var Status = StatusbarDetect();
+export default function trainMenu({route:{params: {webview}}, navigation:{ navigate }}){
+    const [stationData,setStationData] = useState(undefined);
+    const mapRef = useRef();
+    useEffect(()=>{
+        const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}}
+
+        Promise.all([
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
+            fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json())
+        ]).then(values =>{
+            let stationList = {};
+            [stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values;
+            setStationData(stationList);
+        })
+    },[]);
+    return(
+        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
+            <MapView style={{flex:1,width:"100%",height: "100%"}} 
+                showsUserLocation={true}
+                loadingEnabled={true}
+                showsMyLocationButton={false}
+                moveOnMarkerPress={false}
+                showsCompass={false}
+                ref={mapRef}
+                //provider={PROVIDER_GOOGLE}
+                initialRegion={{
+                latitude: 34.194594,
+                longitude: 133.679633,
+                latitudeDelta: 0.5, //小さくなるほどズーム
+                longitudeDelta: 0.5,}}>
+                    {stationData && Object.keys(stationData).map(d=>
+                    stationData[d].map((D,index)=>{
+                        if(!D.StationMap)return null;
+                        const latlng = D.StationMap.replace("https://www.google.co.jp/maps/place/","").split(",");
+                        if(latlng.length == 0)return null;
+                        return(
+                        <Marker key={index} coordinate={{latitude: parseFloat(latlng[0]),longitude: parseFloat(latlng[1])}}
+                        onPress={()=>{
+                            webview.current?.injectJavaScript("MoveDisplayStation('"+d+"_"+D.MyStation+"_"+D.Station_JP+"')");
+                            navigate('Apps');
+                        }}>
+                        </Marker>
+                        )
+                    })
+                    ) }
+            </MapView>
+          <View style={{flexDirection:"row"}}>
+            <UsefulBox backgroundColor={"#F89038"} icon="train-car" flex={1} onPressButton={()=>navigate('howto')}>使い方</UsefulBox>
+            <UsefulBox backgroundColor={"#EA4752"} icon="star" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box")}>お気に入り</UsefulBox>
+            <UsefulBox backgroundColor={"#91C31F"} icon="clipboard-list-outline" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約</UsefulBox>
+          </View>
+            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
+              <View style={{flex:1}} />
+              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>閉じる</Text>
+              <View style={{flex:1}} />
+            </TouchableOpacity>
+        </View>
+    )
+}
+const UsefulBox = (props) =>{
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return(
+    <TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,alignItems:"center",margin:2}} onPress={onPressButton}>
+      <MaterialCommunityIcons name={icon} color="white" size={50}/>
+      <Text style={{color:"white",fontWeight:"bold",fontSize:18}}>{children}</Text>
+    </TouchableOpacity>
+  )
+}