HTML5 的Geolocation(地理位置) API | 文章 - DeTools 工具死神

google map 誕生到今年已經15 年的樣子，地理資訊系統的應用目前也已經非常多元，不過這邊還是來講一下HTML5 的Geolocation(地理位置) API 該怎麼用吧 ... 會員登入 × facebook登入 工具 文章 網路資源 FlickrLinkr 關於 登入 工具 文章 FlickrLinkr 網路資源 關於 如今的程式是一場工程師和上帝的競賽，工程師要開發出更大更好、傻瓜都會用到軟體。

而上帝在努力創造出更大更傻的傻瓜。

目前為止，上帝是贏的。

（RickCook） 文章彙整 文章 HTML5的Geolocation(地理位置)API HTML5的Geolocation(地理位置)API 分享： 2020-02-1723:52:50 標籤： HTML5 GeolocationAPI HTML5API googlemap誕生到今年已經15年的樣子，地理資訊系統的應用目前也已經非常多元，不過這邊還是來講一下HTML5的Geolocation(地理位置)API該怎麼用吧。

要使用geolocation我們會使用到navigator.geolocation.getCurrentPosition()，會依據成功與失敗回傳callbackfunction。

navigator.geolocation.getCurrentPosition(getPosition,error);   成功的話我們會取得經緯度的資訊，失敗就處理一下錯誤訊息。

functiongetPosition(position){ letlat=position.coords.latitude; letlon=position.coords.longitude; } functionerror(error){ console.log(error) } 錯誤的訊息則大致會有以下這些： error.PERMISSION_DENIED：使用者拒絕存取地理資訊error.POSITION_UNAVAILABLE：無法取得地理資訊error.TIMEOUT：請求時間逾時error.UNKNOWN_ERROR：未知錯誤 Geolocation的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度，所以大部分的情況用手機的定位會比較精準一些，但也可能因為環境的關係會飄到奇怪的地方，要使用的話要注意誤差的問題。

接下來我們把座標畫到地圖上，這邊可以使用大家熟悉的googlemaps，不過googlemaps申請api比較麻煩還可能要付費，所以我們改用leaflet.js這隻，先把css跟js讀入就可以使用了。

接著把讀到的點畫到地圖上： letlat="取得的緯度",lon="取得的緯度"; letmap=L.map('map').setView([lat,lon],13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution:'©OpenStreetMapcontributors' }).addTo(map); L.marker([lat,lon]).addTo(map) .bindPopup('你現在的位置在這邊') .openPopup(); 完整的程式碼： SeethePenlefletgeolocaitonbydeathhell (@deathhell)onCodePen.   當位置移動的時候，我們可以透過watchPosition取得移動後的經緯度： letwatchId=navigator.geolocation.watchPosition(getPosition,error); 透過clearWatch清除監測 navigator.geolocation.clearWatch(watchId);   你可能也會喜歡的 HTML5fullscreenAPI(全螢幕API) 可編輯的HTML區塊-contenteditable與designMode 使用IndexedDatabaseAPI存取資料 WebAppManifest 修改htmlinputplaceholder的顏色 使用HTML原生的dialog，讓製作彈出視窗更簡單 和我們交流 加入我們的社群，裡面會有一些技術的內容、有趣的技術梗，以及職缺的分享，歡迎和我們一起討論。

寫扣x教學x講幹話 紅色死神 DeTools 紅色死神 紅色死神 是設計師、工程師也是講師，喜歡開發自己有興趣的網站以及做各種有趣的事情。

追蹤我 最新文章 [CodeIgniter4]Model基礎 Treejs-簡單好用的只要透過JSON就能產生樹狀圖的javascript套件 [CodeIgniter4]開啟除錯模式(debugmode)方便檢查程式的錯誤 [CodeIgniter4]視圖(View)基礎 [CodeIgniter4]設定全站共用變數 [CodeIgniter4]Controller基礎與設定route NightCafeCreator-線上AI藝術作品產生器 AIBackgroundGenerator-輸入文字敘述透過AI自動產生免費圖片 標籤雲 DaVinciResolve 3D Accessible Adobe AdobeXD AfterEffect AI ajax Alpine.js AMP amp-anim amp-img Angular Animate.css Apache API AppUI apple AR array ASCII async axios bash bbs Behance Blogger BOM bootstrap C Cache Canvas carousel CDN chart.js CHATKIT CheatSheets Chrome Chrome擴充功能 CMS codeigniter CodeIgniter4 codingonline component composer contenteditable cookie cse CSS CSSFramework CSSSprite CSS3 CSV D3.js DarkMode Database datalist defer design designMode DevOps Discord Disqus Django DNS docker DOM domain DragandDrop Dribbble ECPay eeGeo email Emmet emoji emojis ER圖 ES6 Excel exif fabric.js facebook favicon Figma FileAPI FinalCutPro firefox Flask flex flexbox flickr FlowChart font FontAwesome Framer FullCalendar functions GA GCP gd2 GeoJSON GeolocationAPI GIT Github githubpage GitLab Go GoDaddy google GoogleAdSense GoogleAnalytics GoogleAppsScript GoogleColab GoogleDataStudio GoogleDrive GoogleMaps GoogleMapsAPI GoogleSearchConsole GoogleTagManager GoogleWorkspace Google試算表 grid GSAP GTM Highlighter highliter Hinet HMTL5 hosting HTML HTML5 HTML5API HTTPStatusCode https icon iconfont IFTTT illustration IndexedDatabaseAPI IndexedDB instagram IntersectionObserverAPI iOS IxD JakobNielsen JAVA javacriptlibrary javascript javascriptlibrary javascriptplugin jQuery jQueryPlugin JSON JSON-LD KML LandingPage Laravel LaravelSail lazyload leaflet.js let lightbox Lighthouse line LineNotify LinkedIn Linode Linux list Livewire loading localstorage logo Mac MacApp manifest Map mapbox MariaDB Markdown Marvel Math meta Migration MindMap Mockup Model moment.js mp3 MySQL Nginx Node.js Notification npm object OpenAPI openExternalBrowser OpenLayers OSI p5.js parcel.js parse_url Patterns PDO persona photoshop php PhpStorm Pintrest Pokémon preg_match PremierePro ProductDesign prototyping PTT PUSHER PWA Python QRCode R React reCAPTCHA RegularExpression robots.txt RSS Ruby RWD Safari sass Scrollspy SCSS SendGrid SEO Servicearchitecture ServiceWorker session sessionstorage Sharedworkers Shopofy shortcode Sitemap Sketch SonyVegas SSHkey SSL StickyNotes SVG SVGSprite SVG.js Swift tailwindcss Template Texture Three.js timestamp TutorLMS TweenMax twitter TypeScript ubuntu UI UIDesign UIGuideline UIKit UIKits UIPattern UML unicode Uniform Unix upload url UTM UX var Video VideoandAudioAPIs viewbox viewport Vim VPS VR VScode VSCodeExtension vue-cli vue-router Vue.js Vue3 Ｗ3Techs Web WebAPI WebApp WebDesign WebSocket WebStorage WebUI WebWorkers WebGIS WebGL Webhook webkit webp webpack WHCP Windows wingzero Wireframe WooCommerce wordpress WordPressPlugin WordPressTemplate WordPressTheme WP_Query WP_Query() WYSIWYG XAMPP Xcode XML XSS youtube 中小學 互動設計 假圖 備份 免費字體 免費工具 免費空間 免費資源 分享連結 前端 加密貨幣 動態效果 動畫 去背 向量圖 哽圖 圖床 圖庫 圖片 圖片壓縮 域名註冊 壓縮圖片 多人協作 字型 字體 寄信服務 小畫家 影片 影片編輯 影音 影音轉檔 後端 手繪風格 技術 技術文件 投票 插畫 搜尋 效能調校 教學 日文字型 日系網站 時光機 時間 時間軸 格式轉換 桌布 機器人 氣象 瀏覽器 瀑布流 無障礙 特效 甘特圖 產生器 留言板 社群分享 社群經營 筆記 素材 終端機 綠界 維基 網站優化 網站存檔 網站排名 網站架設 網站狀態 網站背景 網路 網路資源 網頁小知識 網頁編輯器 線上工具 線上服務 線上聊天室 線上資源 編輯器 縮網址 繪圖 翻譯 背景 腳本 表情符號 視差滾動 解壓縮 論壇 資訊圖表 資訊安全 資訊視覺化 趨勢 軟體推薦 遊戲 配色 金流 關係圖 電商 電子書 靜態網站 音效 音樂 題庫 點陣圖 [AD2M-logo] [AD2M-image] [AD2M-thumb] 贊助 [AD2M-sponsor] [AD2M-title] [AD2M-text]