地図アプリは、平面的な距離や位置関係の把握には有用である一方で、三次元的な構造情報には十分に対応していない場合が多く、利用者にとって分かりづらい場面がある。たとえば、地下鉄の階層構造や高層ビル内の各階、複数フロアにまたがるデパートの案内などがその代表的な例である。これらの問題を解決してくれるアプリを作ってください
地下鉄駅や高層ビル、デパートなどの複雑な3D構造を視覚化し、ナビゲーションを提供するアプリを作成しました。
このアプリは、地下鉄駅や高層ビル、デパートなどの複雑な3D構造を視覚化し、ナビゲーションを提供します：
3D建物ビューワー：
フロア切り替え：
検索機能：
ナビゲーションコントロール：
このアプリは、平面的な地図では表現しきれない複雑な3D構造を視覚的に理解しやすくし、ユーザーが建物内を効率的にナビゲートできるようサポートします。
import { useState, useEffect } from "react";import { Button } from "@/components/ui/button";import { Card, CardContent } from "@/components/ui/card";import { Input } from "@/components/ui/input";import { MapPin, Locate, Navigation } from "lucide-react";import { motion } from "framer-motion";export default function MapApp() { const [destination, setDestination] = useState(""); const [currentPosition, setCurrentPosition] = useState("現在位置取得未実施"); const [navigating, setNavigating] = useState(false); // リアルタイム位置情報の取得 useEffect(() => { if (navigator.geolocation) { navigator.geolocation.watchPosition( (position) => { const { latitude, longitude } = position.coords; setCurrentPosition(現在地：緯度 ${latitude.toFixed(5)} / 経度 ${longitude.toFixed(5)}); }, (error) => { setCurrentPosition("位置情報の取得に失敗しました"); } ); } else { setCurrentPosition("このブラウザは位置情報に対応していません"); } }, []); const handleNavigate = () => { if (destination.trim() !== "") { setNavigating(true); } }; return ( <div className="p-6 grid gap-6 min-h-screen bg-gradient-to-br from-blue-100 via-white to-blue-50"> <h1 className="text-4xl font-bold text-center text-blue-800 drop-shadow-lg tracking-wide"> 直感型地図アプリ（試作版） </h1> <Card className="rounded-3xl shadow-2xl border border-blue-300 bg-white/70 backdrop-blur-md"> <CardContent className="p-6 grid gap-4"> <div className="flex items-center gap-4"> <Input placeholder="目的地を入力してください" value={destination} onChange={(e) => setDestination(e.target.value)} className="rounded-2xl border-blue-300 focus:ring-2 focus:ring-blue-400 text-lg" /> <Button onClick={handleNavigate} className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white rounded-2xl px-5 py-2 text-lg shadow-md"> <Navigation className="mr-2" />ナビ開始 </Button> </div> <div className="flex items-center gap-4"> <MapPin className="text-blue-700" /> <span className="text-blue-700 font-medium text-lg">{currentPosition}</span> </div> </CardContent> </Card> {navigating && ( <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="p-6 border rounded-3xl shadow-2xl bg-white/90 backdrop-blur-lg grid gap-4 text-blue-800" > <h2 className="text-2xl font-semibold">ナビゲーション案内</h2> <p className="text-lg">目的地：{destination}</p> <p className="text-lg">経路：ARと音声案内が有効です</p> <Button onClick={() => setNavigating(false)} variant="destructive" className="rounded-2xl px-5 py-2 text-lg" > 終了 </Button> </motion.div> )} </div> );}
既存の3D室内ナビゲーションアプリに、GPS対応の屋外ナビゲーション機能を統合しましょう。
GPS対応の屋外ナビゲーション機能を既存の3D室内ナビゲーションアプリに統合しました：
このアプリは、屋外から建物内まで一貫したナビゲーション体験を提供し、複雑な都市環境での移動をサポートします。
The code returns the following error:
位置情報エラー: User denied Geolocation
at navigator.geolocation.watchPosition.enableHighAccuracy (/components/outdoor-map)
Revise the code to address the error.
I was previewing: /