マルティスープ
Staff Blog

ID,ユーザーID,ユーザー名,緯度,経度,登録日時 1,1,ユーザ―A,35.69217468,139.7597872,2022/8/25 18:27:14 2,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:24 3,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:39 4,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:44 5,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:54 ・・・

＜template> ・・・ ＜v-file-input id=”fileImport” accept=”text/csv” @change=”importCsvFile” /> ・・・ ＜/template>

＜script> export default { data: () => ({ // googleMap関連 ・・・ locationList: [], // csvファイルから取り込んだ位置情報 // ファイル関連 CSV_LAT: 3, CSV_LNG: 4, ・・・ }, ・・・ methods: { ・・・ /** * csvファイル読み込み */ importCsvFile(e) { const vm = this; let file = e; // こちらにバリデーションを考えて、実装してみてください。 // 読み込みファイル情報セット const reader = new FileReader() reader.readAsBinaryString(file); reader.onload = function() { const csvData = reader.result; const readCsvJson = vm.$papa.parse(csvData); vm.dropLocationPoints(readCsvJson.data); }; }, /** * 位置情報の場所をプロットする * @param {Array} latLng配列 */ dropLocationPoints(list) { const vm = this; this.removeLocationPoints(); list.forEach(item => { let lat = Number(item[this.CSV_LAT]); let lng = Number(item[this.CSV_LNG]); if(lat && lng){ vm.drawCircleSymbol(lat, lng); vm.locationList.push(location); } }); }, /** * Symbol(circle)を地図上に描画する。 * @param lat * @param lng * @return {google.maps.LatLng} latlng */ drawCircleSymbol(lat, lng) { let options = { strokeColor: “#000000”, strokeOpacity: 1, strokeWeight: 0.05, fillColor: “green”, fillOpacity: 0.2, center: new this.google.maps.LatLng(lat, lng), radius: Math.sqrt(20), }; const circle = new this.google.maps.Circle(options); circle.setMap(this.map); this.locationPoints.push(circle); return circle; }, /** * 位置情報をプロットしたすべての場所を削除する */ removeLocationPoints() { this.locationPoints.forEach(symbol => { symbol.setMap(null); }); this.locationPoints = []; }, ・・・ ＜/script>