資料載入中

我是 chung

鎖住記憶

  • Chung
  • 0°C
  • 10 年又 93 天

HTML5 Geolocation

說真的,HTML5 Geolocation的功能真的好用...

輕鬆就可以讓網站也能取得目前所在的地理位置

這次把它運用在innstory裡也是為了方便未來寫下動態或是故事,必竟住址比較不是那麼容易記下...

索性就把這工作交給系統~
<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

上述function只是取得座標位置,若要將座標轉換成地址還得靠下列function
var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ location: new google.maps.LatLng(lat, lng) },
                    function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            document.getElementById("address_guest").value =results[0].formatted_address;
                            }}
                            );

連結網址

昨晚已把這功能也加入了innstory。

台北市內湖區江南街71巷75弄 Go

  • HTML5 Geolocation 功能應用
  • 網站取得地理位置的便利性
  • 將座標轉換成地址的技術
  • 在innstory中運用地理位置
  • 記錄動態故事的地理資訊
https://innstory.com/story-HTML5Geolocation-575

上一篇
 那桌上其實已消逝的記憶

下一篇
多桑李鴻欽(漫畫) 

發表留言

作者簡介

我是chung,網路工作者

主業是網站系統開發建置
副業是做夢、紀錄故事
作品請參考:teme.biz
做夢請參考:innstory.com
聯絡:chung.teme@gmail.com

有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。


推薦閱讀

作者其他相關類別故事

網站植入Facebook登入FB.api請求修改

網站植入Facebook登入…

Chung 8 年又 248 天 2.2K

會特別紀錄下來的原因是因為FB.api請求又調整了~ 必須更改成 在之前~若直接只輸入/me 就可以...

賽馬

賽馬

Chung 2025-09-22 上午 9 點 189

別人的賽馬是看誰的馬跑的夠快。 你倒好,你這匹馬跑都不跑還直接給我躺平。 老師要你練習放鬆,但可...

小小二胡手

小小二胡手

Chung 2026-03-07 上午 11 點 293

來了來了,人生第一堂國樂分組課。 看起來似乎很享受的樣子,真心希望妳能一直保持這樣的學習心態。 加...


推薦閱讀

這個地址也發生了其他故事

寶貝計劃

寶貝計劃

Chung 11 年又 92 天 366

期待卻又往往失敗...這是我目前的心境.... 結婚了...長輩們..朋友們..開始催促著小孩呢?....

結婚4週年快樂

結婚4週年快樂

Chung 10 年又 51 天 2.1K

四年囉~明天2月4日是我們結婚整4年...... 這一切感覺是那麼的奇妙,在網路上認識.... ...

innstory首頁設計

innstory首頁設計

Chung 8 年又 344 天 2.3K

2017年,再次幫Innstory換上了新版的首頁。 這次使用了bootstrap RWD 設計...


附近景點

這個地址-台北市內湖區江南街71巷75弄-附近還有甚麼?

  • 圓山別莊
  • 李春生紀念基督長老教會(大稻埕郵便電信支局)
  • 臺北府城—東門、南門、小南門、北門
  • 帝國生命保險株式會社臺北支店
  • 白榕蔭堂墓園(白崇禧將軍墓)
  • 內湖清代採石場