JS F2E 精神時光屋 -口罩地圖
此為F2E 精神時光屋 - 口罩地圖的筆記 作品原始碼 作品連結 AJAX 為了抓取有販售的藥局，我們使用XMLHttpResquest API請求伺服器資料 var xhr = new XMLHttpRequest(); //準備和某某伺服要藥局剩餘口罩資料 xhr.open("get", "https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json"); //執行要資料的動作 xhr.send(); xhr.onload = function() { var data = JSON.parse(xhr.responseText).features; } 這樣我們就可以從 data 抓取資料 地圖 由於Google Map需要收錢，這邊我就使用openstreetmap圖資以及 leaflet 框架 地理位置定位 由於我們的位置需要判斷是否使用地理位置定位 (Geolocation)，所以在使用地圖前先透過Promise方式取得位置在進行下一步 let newpromise = new Promise(function(resolve, reject) { navigator.geolocation.getCurrentPosition(success, error) function success(position) { let userPosition = [position.coords.latitude, position.coords.longitude] resolve(userPosition) } function error() { let userPosition = [25.047702, 121.5151848]; resolve(userPosition) } }) newpromise.then(function(userPosition) { //內容 } 上面抓取定位後，接著我們設定地圖 //地圖的中心點與縮放距離