Map에 표시자를 React Native로 동적으로 표시

(1) react-native-maps로 동적 표시
평소 사회복지사(PSW)로서 장애가 있는 이들을 지원한다.리액트와 리액트 네이티브로 애플리케이션을 만드는 재미를 누리다.기존에 제작된 리액트네이티브 앱에 react-native-maps가 사용됐기 때문에 정리해보려고 합니다.
참고 문장.React Native의 추가 캘린더를 제작했습니다.기사 감사합니다.
(2) 약 25000곳
일본 전역의 장애인 대상 취업지원사업소 수로, 최근 들어 많이 늘었고, IT 기술을 배울 수 있는 사무소도 있다.모든 사업소를 지도로 만들고 싶어서 데이터 수집부터 시작했어요.
각 도도부현 및 정령지정도시는 법률에 따라 공개되지만 도도부현마다 데이터 형식이 다르고 PDF 형식과 엑셀 형식 등이 있으며 커튼으로 데이터를 수집한다.오래 걸렸어요.💦
그나저나 간호보험의 전국 사무소 일람표는 디지털청에서 운영한다.에서 얻을 수 있고 지선도 포함되어 있어 지도에 바로 떨어질 수 있어 매우 편리하다.
(3) 데이터 가공
전국의 사업소 정보를 수집할 수 있다면 가공을 할 겁니다.
우선 주소에서 지선을 만든다.엑셀로 yahoo 지선을 이용하다.
=FILTERXML(WEBSERVICE("[ReactNative] 지도의 표시 영역을 react-native-maps로 묘사할 때마다 영역 정보를 얻습니다 "& ＜주소>, "//Coordinates"
칸에 이 함수를 입력하면 한꺼번에 지선을 얻을 수 있습니다.전환이 잘 안 되는 경우도 있어 해당하는 데이터 검사가 필요하다.또한 칸을 위도 경도에 따라 구분하여 얻은 지선을 만든다.
csv 형식으로 저장하고 nodejs를 사용하여 json 형식으로 변환합니다.

// tojson.js
const fs = require("fs");
const csv = require("csv");

fs.createReadStream("変換したいファイル.csv").pipe(
  csv.parse({ columns: true }, function (err, data) {
    function writeFile(path, data) {
      const jsonStr = JSON.stringify(data);
      fs.writeFile(path, jsonStr, (err) => {
        if (!err) {
          console.log("Json作成完了");
          console.log(data);
        }
      });
    }
  })
);
// node tojson 変換したいファイル.csv

작성된 json을 JavaScript 객체로 변환할 준비가 완료되었습니다.
(4) 코드
그럼react-native-maps에서 만든 데이터를 보여 주세요.
사용한 라이브러리
・react-native
・expo 42.0.1
・react-native-maps0.28.0
맵 구성 요소 만들기

 <MapView
　　onRegionChangeComplete={handleRegionChange} // 地図を移動し終えた後に発火するイベント
　　initialRegion={{　
      latitude: 35.681236, // 初期表示は東京駅に設定
      longitude: 139.767125,
      latitudeDelta: 0.05, // 初期表示範囲
      longitudeDelta: 0.05,
     }}
      minZoomLevel={9} // 初期縮尺レベル
      maxZoomLevel={30}
   >
    // mapを使って作成したデータオブジェクトを展開
    // mapListは作成したデータを必要な形（次のコード）にしてセットする変数
     {mapList.map((item) => { 
        return (
     　  <Marker
           pinColor={"red"}
           key={item.id} // データidをインデックスに　
           title={item.name} 
           coordinate={{
            latitude: Number(item.lat), // 緯度経度を数値型に変換
            longitude: Number(item.lng),
          }}
           >
          <Callout
              onPress={() => {
              navigation.navigate(); // 事業所個別ページに遷移
              }}
            >
          <View>
           <Text>
            {item.name} // ピンをタップしたときに表示させる
           </Text>
          </View>
        </Callout>
       </Marker>
     );
   })}
</MapView>

지도에 데이터를 표시할 때 사업 단위의 수가 많으면 읽을 때 시간이 걸리고 엉망이 될 수 있으니 일정 범위 내의 데이터만 표시하세요.지도를 이동할 때마다 기준이 바뀌어 해당 범위 내의 사무소가 다시 표시됩니다.

import { list } from "作成したファイル.js"; // 作成したデータをオブジェクトに変換したjsファイル
import { dummy } from "ダミーファイル.js"; // 初期表示させるダミーデータjsファイル

 const [mapList, setMapList] = useState(dummy); // 初期表示はダミーデータでエラー回避
 const [map, setMap] = useState({}); // onRegionChangeCompleteで取得されるregionをセットする変数

 handleRegionChange = (region) => {
    setMap(region);
        let newList = list.filter(
          (item) =>
            item.lng >= map.longitude - 0.3 && // 緯度経度でフィルターをかけ
            item.lng <= map.longitude + 0.3 && 
            item.lat >= map.latitude - 0.1 &&
            item.lat <= map.latitude + 0.1
        );
        setMapList(newLlist); // 範囲内の事業所をmapListにセット
    }
  };

ios는 애플 지도를 사용할 때 특별한 설정이 필요하지 않지만android는 앱입니다.js에 다음과 같은 내용을 기재해야 한다.
GCP 콘솔에서 Maps SDK for Android를 가져오십시오.

"android": {
      "package": "",
      "permissions": [],
      "versionCode": ,
      "config": {
        "googleMaps": {
          "apiKey": ＜APIキー＞ // Maps SDK for Android
        }
      }
    },

(5) 끝
실제 동작
@nekoniki
Advent Calendar에 이틀 연속 참가했습니다.나는 쓴 것을 연말에 쓰고 내년에도 좋은 한 해를 보내고 싶다!