Spaces:
Sleeping
Sleeping
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>POI Map</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="controls" class="container-fluid"> | |
| <div class="row mb-2"> | |
| <div class="col-md-4 col-12"> | |
| <div class="form-group"> | |
| <label for="poiTypeSelect">選擇POI類型</label> | |
| <select id="poiTypeSelect" class="form-control"> | |
| <option value="all">All</option> | |
| <option value="mrt">MRT</option> | |
| <option value="school">SCHOOL</option> | |
| <option value="landfill">LANDFILL</option> | |
| <option value="hospital">HOSPITAL</option> | |
| <option value="collage">COLLAGE</option> | |
| <option value="park">PARK</option> | |
| <option value="financial_industry">FINANCIAL_INDUSTRY</option> | |
| <option value="entertainment">ENTERTAINMENT</option> | |
| <option value="shopping">SHOPPING</option> | |
| <option value="temple">TEMPLE</option> | |
| <option value="funeral_industry">FUNERAL_INDUSTRY</option> | |
| <option value="night_market">NIGHT_MARKET</option> | |
| <option value="hsr">HSR</option> | |
| <option value="gas_station">GAS_STATION</option> | |
| <option value="station">STATION</option> | |
| <option value="bus_station">BUS_STATION</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-6"> | |
| <div class="form-group"> | |
| <label for="latInput">輸入緯度</label> | |
| <input type="text" id="latInput" class="form-control" placeholder="輸入緯度" /> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-6"> | |
| <div class="form-group"> | |
| <label for="lngInput">輸入經度</label> | |
| <input type="text" id="lngInput" class="form-control" placeholder="輸入經度" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mb-2"> | |
| <div class="col-12"> | |
| <button id="searchButton" class="btn btn-primary">查詢最近的前10個POI</button> | |
| <button id="uploadButton" class="btn btn-secondary">上傳POI數據</button> | |
| <input type="file" id="fileInput" style="display:none"> | |
| <button id="clearButton" class="btn btn-danger">清除POI</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12 d-md-block"> | |
| <div id="info" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="legend" class="legend"></div> | |
| <!-- 確認/取消通知模態框 --> | |
| <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="confirmationModalLabel">確認操作</h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body" id="confirmationMessage"></div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> | |
| <button type="button" class="btn btn-primary" id="confirmButton">確認</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | |
| <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |