香港行山地圖 (網站) 手機版

[anti-both]

自 從 Google 在 2015 年 年 初 公 佈 了 「行 動 裝 置 相 容 性 更 新 」,很 多 網 站 都 更 新 了 自 家 的 手 機 版 網 站 ,以 迎 合 Google 的 要 求 。那 個 「行 動 裝 置 相 容 性 更 新 」究 竟 是 什 麼 呢 ?那 就 是 當 你 用 行 動 裝 置 ( 手 機 、平 板 ) 在 Google 搜 尋 的 時 候 ,Google 會 自 動 發 給 你 mobile-friendly 的 結 果 。於 是 ,你 在 手 機 瀏 覽 結 果 時 就 會 有 更 佳 的 享 受 。

http://googlewebmaster-tcn.blogspot.hk/2015/04/google.html

而 如 果 你 的 網 站 並 不 是 mobile-friendly 的 話 ,那 Google 就 會 在 行 動 裝 置 搜 尋 的 時 候 把 你 的 網 站 的 排 名 下 降 ,以 降 低 你 的 曝 光 率 。據 說 現 時 有 一 半 的 網 上 瀏 覽 都 是 發 生 在 手 機 上 的 ,所 以 沒 有 一 個 mobile-friendly 的 網 站 實 在 是 很 蝕 底 。

於 是 筆 者 就 趁 這 個 機 會 改 寫 了 一 個 行 動 版 的 網 頁 。要 把 網 頁 快 速 地 變 為 手 機 版 ,沒 有 比 jQuery Mobile 更 簡 單 好 用 的 方 法 了 。

https://jquerymobile.com/

如 果 你 用 手 機 或 平 板 打 開 「香 港 行 山 地 圖 」網 站 ,你 就 會 自 動 去 到 手 機 版 。

香 港 行 山 地 圖 網 站

香 港 行 山 地 圖 網 站

在 Header 的 左 邊 是 「路 線 」按 鈕 ,按 一 下 就 會 打 開 左 邊 的 Panel。

「路 線 」按 鈕

「路 線 」按 鈕

所 有 行 山 路 線 都 會 在 這 裡 找 得 到 。

005

行 山 路 線

點 選 了 想 看 的 路 線 ,它 就 會 在 地 圖 上 展 示 出 來 。

紅 梅 谷 自 然 教 育 徑

紅 梅 谷 自 然 教 育 徑

跟 桌 面 版 的 網 頁 一 樣 ,綠 色 的 就 是 主 要 路 線 ,黃 色 的 就 是 起 點 和 終 點 的 交 通 資 訊 。

交 通 資 訊

交 通 資 訊

手 機 版 也 一 樣 有 標 示 最 近 的 公 共 交 通 ,例 如 巴 士 站 ,小 巴 站 之 類 。

路 線 名 稱

路 線 名 稱

在 Footer 就 是 路 線 名 稱 ,如 果 點 選 一 下 ,就 會 打 開 right panel。

路 線 資 訊

路 線 資 訊

Right panel 就 是 該 條 路 線 的 資 料 和 簡 介 。

「設 定 」按 鈕

「設 定 」按 鈕

Header 的 另 一 邊 就 是 「設 定 」按 鈕 。

營 地 和 山 峰

營 地 和 山 峰

這 裡 可 以 設 定 「露 營 地 點 」和 「香 港 山 峰 」顯 示 與 否 。

「定 位 」按 鈕

「定 位 」按 鈕

最 後 ,因 為 這 是 手 機 版 網 頁 ,所 以 加 入 了 「定 位 」功 能 。大 家 只 要 按 一 下 定 位 按 鈕 ,地 圖 上 就 會 標 示 出 你 所 在 的 位 置 。

Android Share Location

Android Share Location

不 過 ,如 果 大 家 想 使 用 定 位 功 能 ,你 必 須 要 在 browser 設 定 share location,不 然 程 式 就 無 法 獲 取 你 的 位 置 了 。而 且 大 家 盡 可 以 安 心 使 用 ,因 為 這 個 定 位 是 使 用 javascript 直 接 在 手 機 上 進 行 的 ( navigator.geolocation ),是 完 全 不 會 有 任 何 資 訊 傳 送 到 我 們 的 伺 服 器 的 。

如 果 大 家 有 興 趣 檢 查 一 下 自 己 的 網 站 是 否 mobile-friendly ( 只 對 於 Google 來 說 ),大 家 可 以 使 用 Google 的 行 動 裝 置 相 容 性 測 試 網 頁 。

https://www.google.com/webmasters/tools/mobile-friendly/

最 後 ,別 介 意 老 人 多 說 幾 句 ,大 家 行 山 必 須 要 帶 備 政 府 出 版 的 行 山 地 圖 。千 萬 別 只 用 手 機 的 網 上 地 圖 去 行 山 呀 。

ctleung張先生,男性,肖龍。
職業:I.T. Consultant
簡介:不好好讀書;七尺差五寸,手長過膝,雙耳垂肩;性寬和,寡言語,喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……

This entry was posted in 香港行山地圖(網站) and tagged , , , , , , . Bookmark the permalink.

4 Responses to 香港行山地圖 (網站) 手機版

  1. Spencer Lo says:

    很想使用定位功能,但每次開網頁時,出現“user denied for the request of Geolocation” . 在網頁上找不到“Share Location” 的 button. 怎麽辦呢?

    • C.T. Leung says:

      這有兩個可能。

      第一,你用 chrome。Chrome 在去年已經不再支持「不安全」連線下獲取 Geolocation 的資訊。你要送我一張 SSL certificates 才有解。

      第二,是你用其他 browser,但你在網站第一次要求你提供 Geolocation 時選擇了永遠拒絕。這個要在你的 browser 的設定裡面解決。

  2. Thomas says:

    你的香港行山地圖真的很實用,但最近設定計劃後,為什麼出不到地圖截圖呢?是不是出了什麼問題?

Leave a Reply

Your email address will not be published. Required fields are marked *