用谷歌地图创建 GPS 应用

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App min-h-screen bg-gradient-to-b from-blue-500 to-indigo-900 text-white">
        <header className="text-center py-10">
          <h1 className="text-4xl font-bold">GPS Application</h1>
          <p className="mt-2">Find your way around with ease.</p>
        </header>
        <main className="px-4 py-8">
          <section className="bg-white p-8 rounded-lg shadow-md text-gray-800">
            <h2 className="text-2xl font-semibold mb-4">Map Integration</h2>
            <div className="aspect-w-16 aspect-h-9">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.835434509366!2d144.95373531531657!3d-37.8162797420211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d94e1a7e0b0f!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1629831234567!5m2!1sen!2sus"
                className="w-full h-full border-0"
                allowFullScreen=""
                loading="lazy"
              ></iframe>
            </div>
          </section>
        </main>
        <footer className="text-center py-4 bg-black bg-opacity-50">
          <p>&copy; 2025 GPS Application. All rights reserved.</p>
        </footer>
      </div>
    );
  }
}

export default App;