Skip to content

Instantly share code, notes, and snippets.

@typebrook

typebrook/findme.html

Last active March 18, 2020 04:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save typebrook/a90cb45495dada8058ab0a348b1ae2cf to your computer and use it in GitHub Desktop.
Save typebrook/a90cb45495dada8058ab0a348b1ae2cf to your computer and use it in GitHub Desktop.
Download ZIP
[findme.help] Only shows action buttons after getting location #html #findme #rescue
Raw
findme.html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Geo Locationing Service">
<meta name="author" content="Edwin Wang">
<meta property="og:title" content="FindMe 座標定位" />
<meta property="og:description" content="透過網頁提供座標定位服務">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://findme.help" />
<meta property="og:image" content="https://findme.help/img/s.png" />
<title>FindMe 定位服務</title>
<link href="vendor/bootstrap.min.css" rel="stylesheet">
<link rel="manifest" href="manifest.json"></link>
<style>
body {
padding-top: 0px;
background-color: black;
}
@media (min-width: 992px) {
body {
padding-top: 0px;
}
}
</style>
</head>
<body>
<!-- Page Content -->
<div class="container-fluid" style="height: 20px; background: repeating-linear-gradient(-45deg, orange, orange 8px, black 5px, black 20px);"></div>
<section>
<div class="container-fluid" style="background-color: black">
<div class="row">
<div class="p-4">
<img src="img/safari.svg" height="60px" width="60" style="display: inline-block; vertical-align: 40%">
<h1 class="font-weight-light" style="display: inline-block; color: orange; padding-left:10px; vertical-align: 50%">Find</h1><h1 style="display: inline-block; color: orange; vertical-align: 50%"><strong>Me</strong></h1>
<p class="lead text-white pt-4 pb-3" id="loc" style="padding-left:0px">請按「定位」顯示座標資訊。您需要允許偵測位置資訊的權限才能夠讀取您的位置資訊。</p>
<p class="lead" id="msg" style="padding-left:0px; color: red"></p>
</div>
</div>
<div style="padding-left:10px; padding-bottom:35px">
<button class="btn" onclick="getLocation()" style="background-color: orange">
<img src="img/loc.svg" height="19px">定位
</button>
<div class="btn-group pl-2" id="actions" style="display:none">
<button type="button" class="btn btn-secondary" data-clipboard-target="#loc" onclick="alert('已複製到剪貼簿！')">
<img src="img/file.svg" height="19px">
</button>
<a href="sms:?body=請先取得座標" id="SMS" class="btn btn-secondary">
<img src="img/msg.svg" width="19px">
</a>
<a target="_blank" href="#" id="map" class="btn btn-secondary">
<img src="img/map.svg" width="19px">
</a>
</div>
</div>
</div>
</section>
<section>
<div class="container-fluid">
<div class="row bg-dark">
<div class="progress" id="countdown" style="display: none">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 100%; height:25px"></div>
</div>
</div>
</div>
</section>
<div class="container-fluid" style="height: 20px; background: repeating-linear-gradient(45deg, orange, orange 8px, black 5px, black 20px);"></div>
<section>
<div class="container-fluid">
<div class="row" style="background-color: orange">
<div class="col-lg-4 col-md-6 p-4">
<h4 class="pt-3">停下來。尋求援助！</h4>
<br>
<p>迷途了嗎？先冷靜下來，找安全的地點並停止步伐，來幾次深呼吸讓腦袋清醒一下。人慌張的時候容易做出錯誤的決策，花點時間把下面的內容讀完，發送求救訊息，然後耐心等候救援。</p>
<p>透過本網站的服務，您可以定位並取得目前所在位置的座標，介面上提供有複製、傳送簡訊、及 Google Maps 顯示等功能，請妥善利用。</p>
<p>通報救援單位時，除了本服務提供的座標資訊外，請記得敘述名字、身分證字號、可通聯方式、需協助事項（迷途、受傷等）、原行程規劃、現場可供辨識之地理特徵等。如非必要避免聯絡太多親友，避免過多來電影響溝通管道，及不必要的電力浪費。</p>
<p>如果知道自己的手機使用哪種品牌跟型號，也可以一併提供給救援單位。有些手機內建有更精準的定位 app 或機制，或許能夠加速搜救人員確認您的位置。</p>
</div>
<div class="col-lg-4 col-md-6 p-4 bg-dark text-light">
<h4 class="pt-3">座標已發送，然後呢？</h4>
<br>
<p>如您仍有辦法使用本服務，代表通訊至少是正常的。為了節省手機電力，最好與搜救人員聯繫好定時通訊時間，除約定的時間外，盡量避免使用手機。</p>
<p>於等待的期間，仔細檢視自己攜帶的裝備跟糧食，找出可幫助自己維持體力、體溫的器材並分配好糧食飲水。有時救援行動需要時間籌劃，天候或其他因素也可能造成額外的延宕，但仍要保持樂觀，耐心等候。</p>
<p>很重要的一點，就是一但將座標發送出去，<strong><mark style="background-color: yellow">千萬不要再亂跑</mark></strong>或嘗試自行尋找出路（除非有不得已、危及生命的情況必須離開原地）。過去有很多案例，都是原本無生命危急的迷途事件，卻因為迷途者報案後仍繼續移動尋找出路，導致最後很晚才被尋獲，甚至喪失性命。</p>
<p>如因不可抗力因素需移動，切記要<strong><mark style="background-color: yellow">製造大量人為痕跡</mark></strong>，如折斷樹枝、綑綁芒草箭竹、排列石頭等可供搜救人員辨識移動方位的跡象。</p>
</div>
<div class="col-lg-4 col-md-6 p-4">
<h4 class="pt-3">3333 生存守則</h4>
<br>
<p>一般人在遇到下列情況時可能會危及生命：</p>
<ul>
<li>三分鐘沒氧氣</li>
<li>三小時沒有維持體溫</li>
<li>三天沒有喝水</li>
<li>三週沒有進食</li>
</ul>
<p>大部分山難罹難者，如非疾病或創傷因素，大多都是<strong><mark style="background-color: yellow">因為失溫</mark></strong>而失去生命。因此假如迷途了，首先要確保環境跟自身的安全，尋找能擋風遮雨、保持體溫的地點避難，而不是擔心食物跟飲水。</p>
<p>如果人仍在明顯路徑或步道上，則建議在無生命危險的前提下，避免偏離原步道，以免造成搜救困難，延宕被救援的時間。此外，台灣山區地形多有極大落差，如非必要，<strong><mark style="background-color: yellow">不要下切溪谷</mark></strong>，除了可能導致受困溪谷外，大多數搜救行動會先從明顯路徑開始尋找，而後才是溪谷及危險地形。</p>
</div>
<div class="col-lg-4 col-md-6 p-4 bg-dark text-light">
<h4 class="pt-3">等待救援時該有的認知</h4>
<br>
<p>依照您所在的地點及天候狀況，有時救援並沒有辦法很及時。山下的人員會需要時間集結、準備裝備，到您的所在地點也需要時間。</p>
<p>等待的感覺會很漫長，夜間的山裡會很吵雜，有許多沒聽過的聲音，不習慣的人很容易恐慌。但只要不失溫，在山上存活超過一個星期也是常有的事。記得保持正向的態度，冷靜的於安全處等待救援，減少身體能量的消耗，就已經成功一半。</p>
<p>記得人在慌亂的時候，講話邏輯會受到影響。有需要聯絡的事項，可以盡量透過訊息完成，減少語音溝通上的誤會。</p>
<p>如同前面提過的，救援人員會需要時間抵達，糧食跟飲水請做好控管，分配成比預計獲得救援時間再多一些（例如預計一天獲救，就分配成兩天的份），因為救援行動有時會因為天候或地形變化延宕。</p>
</div>
<div class="col-lg-4 col-md-6 p-4">
<h4 class="pt-3">各縣市簡訊報案專線</h4>
<br>
<p>以下報案專線為<strong><mark style="background-color: yellow">簡訊專用</mark></strong>，請以案發當地消防局專線報案。如需語音服務，請直接<strong><mark style="background-color: yellow">撥打 119 或 110</mark></strong>。</p>
<table class="table table-sm table-dark small">
<thead>
<tr>
<th scope="col" class="pl-3 pr-3">單位</th>
<th scope="col">簡訊號碼</th>
</tr>
</thead>
<tbody>
<tr>
<th class="pl-3 pr-3">基隆市消防局</th>
<td class="pr-3">0911-511-901</td>
</tr>
<tr>
<th class="pl-3 pr-3">臺北市政府消防局</th>
<td class="pr-3">0932-299-702</td>
</tr>
<tr>
<th class="pl-3 pr-3">新北市政府消防局</th>
<td class="pr-3">0911-510-495</td>
</tr>
<tr>
<th class="pl-3 pr-3">桃園縣政府消防局</th>
<td class="pr-3">0911-511-904</td>
</tr>
<tr>
<th class="pl-3 pr-3">新竹市消防局</th>
<td class="pr-3">0911-511-905</td>
</tr>
<tr>
<th class="pl-3 pr-3">新竹縣政府消防局</th>
<td class="pr-3">0911-511-906</td>
</tr>
<tr>
<th class="pl-3 pr-3">苗栗縣政府消防局</th>
<td class="pr-3">0911-511-907</td>
</tr>
<tr>
<th class="pl-3 pr-3">臺中市政府消防局</th>
<td class="pr-3">0911-511-908</td>
</tr>
<tr>
<th class="pl-3 pr-3">彰化縣消防局</th>
<td class="pr-3">0911-511-910</td>
</tr>
<tr>
<th class="pl-3 pr-3">南投縣政府消防局</th>
<td class="pr-3">0911-511-911</td>
</tr>
<tr>
<th class="pl-3 pr-3">雲林縣消防局</th>
<td class="pr-3">0911-511-912</td>
</tr>
<tr>
<th class="pl-3 pr-3">嘉義市政府消防局</th>
<td class="pr-3">0911-511-913</td>
</tr>
<tr>
<th class="pl-3 pr-3">嘉義縣消防局</th>
<td class="pr-3">0911-511-914</td>
</tr>
<tr>
<th class="pl-3 pr-3">臺南市政府消防局</th>
<td class="pr-3">0911-511-915</td>
</tr>
<tr>
<th class="pl-3 pr-3">高雄市政府消防局</th>
<td class="pr-3">0911-511-917</td>
</tr>
<tr>
<th class="pl-3 pr-3">屏東縣政府消防局</th>
<td class="pr-3">0911-511-919</td>
</tr>
<tr>
<th class="pl-3 pr-3">宜蘭縣政府消防局</th>
<td class="pr-3">0911-511-920</td>
</tr>
<tr>
<th class="pl-3 pr-3">花蓮縣消防局</th>
<td class="pr-3">0911-511-921</td>
</tr>
<tr>
<th class="pl-3 pr-3">臺東縣消防局</th>
<td class="pr-3">0911-511-922</td>
</tr>
<tr>
<th class="pl-3 pr-3">澎湖縣政府消防局</th>
<td class="pr-3">0911-511-923</td>
</tr>
<tr>
<th class="pl-3 pr-3">金門縣消防局</th>
<td class="pr-3">0911-511-924</td>
</tr>
<tr>
<th class="pl-3 pr-3">連江縣消防局</th>
<td class="pr-3">0919-919-995</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-md-6 p-4 bg-dark text-muted">
<h4 class="pt-3">關於本服務</h4>
<br>
<p>本站主要是透過標準 HTML GeoLocation Web API 所建置的免費定位服務，行動裝置之瀏覽器需能支援相關語法並內建有定位模組才能提供較精準座標資訊，但仍無法取代獨立定位及導航 app。</p>
<p>已知問題：部分手機內建瀏覽器因為版本較舊，可能會造成顯示或執行上的問題。請使用 Google Chrome、Firefox、Safari 等新版瀏覽器。</p>
<p>本站及其開發者無法對使用本站所提供之資訊造成的任何後果負擔法律責任，如有任何建議請與我聯繫。</p>
<p class="text-right">Edwin Wang<br><a href="mailto:m@edwin.wang" class="text-muted">m@edwin.wang</a></p>
<table class="table table-sm table-dark small text-muted">
<thead>
<tr>
<th scope="col" class="pl-3 pr-3">Version</th>
<th scope="col">Changes</th>
</tr>
</thead>
<tbody>
<tr>
<th class="pl-3 pr-3">V1.0</th>
<td class="pr-3">First release</td>
</tr>
<tr>
<th class="pl-3 pr-3">V1.1</th>
<td class="pr-3">Improved UI, bug fixes</td>
</tr>
<tr>
<th class="pl-3 pr-3">V1.2</th>
<td class="pr-3">Added reference info, bug fixes</td>
</tr>
<tr>
<th class="pl-3 pr-3">V1.3</th>
<td class="pr-3">UI tweaks, limited retries, bug fixes</td>
</tr>
<tr>
<th class="pl-3 pr-3">V1.4</th>
<td class="pr-3">Added PWA support</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!--footer-->
<section id="footer">
<div class="container-fluid" style="height: 20px; background: repeating-linear-gradient(-45deg, orange, orange 8px, black 5px, black 20px);"></div>
</section>
<!--scripts-->
<script>
var x = document.getElementById("loc"); //shows location data
var y = document.getElementById("msg"); //shows info messages
var z = document.getElementById("actions"); //shows actions
var countdownBar = document.getElementById("countdown"); //countdown progress bar
var retryTimer;
const posAccuracy = 50; //minimum accuracy required
var count = 0;
var tries = 0;
var firstTime = true;
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
function formatFloat(num, pos) {
var size = Math.pow(10, pos);
return Math.round(num * size) / size;
}
function retry() {
y.innerHTML = "誤差偏高，重新定位中（" + tries + "）";
countdownBar.style.display = 'block';
countdownBar.style.width = count + "%";
if (count++ == 100) {
clearInterval(retryTimer);
count = 0;
y.innerHTML = "";
countdownBar.style.display = "none";
navigator.geolocation.getCurrentPosition(showPosition, showError, options);
}
z.style.display = "inline-flex";
}
function getLocation() {
count = 0;
tries = 0;
clearInterval(retryTimer);
countdownBar.style.display = "none";
y.innerHTML = "";
if (navigator.geolocation) {
x.innerHTML = "定位中...";
navigator.geolocation.getCurrentPosition(showPosition, showError, options);
} else {
x.innerHTML = "您的瀏覽器不支援定位服務。";
}
}
function showPosition(position) {
var latVal = formatFloat(position.coords.latitude, 6);
var lonVal = formatFloat(position.coords.longitude, 6);
var altiVal = position.coords.altitude;
var accuVal = Math.round(position.coords.accuracy);
if (firstTime) {
firstTime = false;
x.innerHTML = "初始定位中..."
var timeOut = setTimeout(getLocation, 5000);
} else {
if (altiVal == null) {
altiVal = "無法讀取";
} else {
altiVal = Math.round(altiVal) + "M";
}
x.innerHTML = "緯度: " + latVal +
"<BR>經度: " + lonVal +
"<BR>海拔: " + altiVal +
"<BR>誤差: " + accuVal + "M";
if (accuVal > posAccuracy && tries++ < 3) {
retryTimer = setInterval(retry, 100);
} else if (accuVal > posAccuracy && tries == 4) {
y.innerHTML = "無法取得較精確座標，請至空曠地點重新定位！"
tries = 0;
}
document.getElementById("SMS").href = "sms:?body=" +
"緯度：" + latVal +
"%0a經度：" + lonVal +
"%0a海拔：" + altiVal +
"%0a誤差：" + accuVal +
"%0a";
document.getElementById("map").href = "https://www.google.com/maps/search/?api=1&query=" +
latVal + "," + lonVal;
link.replaceAll();
z.style.display = "inline-flex";
}
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "使用者拒絕位置權限，請允許定位權限。";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "無法取得位置資訊，請重新定位。";
break;
case error.TIMEOUT:
x.innerHTML = "位置資訊取得逾時，請重新定位。";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "不明錯誤！";
break;
}
}
</script>
<script src="vendor/sms-link.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (function () {
link = new SMSLink.link();
link.replaceAll();
}), false);
</script>
<script src="vendor/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
<script src="sw-register.js"></script>
<script src="manup.min.js"></script>
<script src="vendor/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment