Я не понимаю в чём ошибка, можете помочь, посмотреть мой код
This commit is contained in:
parent
28c309b650
commit
49eb02e6a9
@ -1,31 +0,0 @@
|
|||||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
|
||||||
import 'leaflet/dist/leaflet.css';
|
|
||||||
import L from 'leaflet';
|
|
||||||
|
|
||||||
// Убедитесь, что иконка маркера отображается правильно
|
|
||||||
delete L.Icon.Default.prototype._getIconUrl;
|
|
||||||
L.Icon.Default.mergeOptions({
|
|
||||||
iconRetinaUrl: '/leaflet/images/marker-icon-2x.png',
|
|
||||||
iconUrl: '/leaflet/images/marker-icon.png',
|
|
||||||
shadowUrl: '/leaflet/images/marker-shadow.png',
|
|
||||||
});
|
|
||||||
|
|
||||||
const Map = () => {
|
|
||||||
const position = [51.505, -0.09]; // Координаты для центра карты
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MapContainer center={position} zoom={13} style={{ height: '100vh', width: '100%' }}>
|
|
||||||
<TileLayer
|
|
||||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
||||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
/>
|
|
||||||
<Marker position={position}>
|
|
||||||
<Popup>
|
|
||||||
A pretty CSS3 popup. <br /> Easily customizable.
|
|
||||||
</Popup>
|
|
||||||
</Marker>
|
|
||||||
</MapContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Map;
|
|
||||||
50
app/index.tsx
Normal file
50
app/index.tsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const Home: React.FC = () => {
|
||||||
|
const [fileContent, setFileContent] = useState<string>('');
|
||||||
|
const [previewHtml, setPreviewHtml] = useState<string>('');
|
||||||
|
|
||||||
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = event.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
const xmlString = e.target?.result as string;
|
||||||
|
setFileContent(xmlString);
|
||||||
|
// Преобразование XML в HTML
|
||||||
|
const htmlString = convertXmlToHtml(xmlString);
|
||||||
|
setPreviewHtml(htmlString);
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const convertXmlToHtml = (xml: string): string => {
|
||||||
|
// Простой пример преобразования XML в HTML
|
||||||
|
return xml.replace(/<(\w+)>(.*?)<\/\1>/g, '<div><strong>$1:</strong> $2</div>');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
const blob = new Blob([previewHtml], { type: 'text/html' });
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = URL.createObjectURL(blob);
|
||||||
|
link.download = 'converted.html';
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Конвертер XML в HTML</h1>
|
||||||
|
<input type="file" accept=".xml" onChange={handleFileChange} />
|
||||||
|
<br />
|
||||||
|
<button onClick={handleDownload} disabled={!previewHtml}>
|
||||||
|
Скачать HTML
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h2>Предварительный просмотр:</h2>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: previewHtml }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -9,6 +9,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
|
"marked": "^15.0.8",
|
||||||
"next": "15.2.3",
|
"next": "15.2.3",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
@ -4171,6 +4172,18 @@
|
|||||||
"loose-envify": "cli.js"
|
"loose-envify": "cli.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/marked": {
|
||||||
|
"version": "15.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/marked/-/marked-15.0.8.tgz",
|
||||||
|
"integrity": "sha512-rli4l2LyZqpQuRve5C0rkn6pj3hT8EWPC+zkAxFTAJLxRbENfTAhEQq9itrmf1Y81QtAX5D/MYlGlIomNgj9lA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"marked": "bin/marked.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/math-intrinsics": {
|
"node_modules/math-intrinsics": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
|
"marked": "^15.0.8",
|
||||||
"next": "15.2.3",
|
"next": "15.2.3",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
|
|||||||
@ -22,6 +22,6 @@
|
|||||||
"@/*": ["./*"]
|
"@/*": ["./*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/page", " map/ page/inde"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user