如何將地理位置（通過Googlemaps顯示）保存到本地存儲並稍後加載

我有地理位置和本地存儲的問題。所以這個波紋管是我的代碼。對不起，有些文字是西里爾文，但這是因爲這是我的家庭作業，我來自保加利亞。文本說什麼並不重要。你只需要知道第一個按鈕是Get，第二個 - 保存，第三個 - 加載。所以我不得不做出第一個按鈕來顯示我的位置與谷歌地圖 - 沒關係。我做到了。接下來是棘手的部分。使用第二個按鈕「保存」，我必須將數據從地理位置保存到本地存儲。當點擊第三個按鈕Load時，保存在本地存儲中的位置應該會在（div id =「map）中再次顯示我嘗試了不同的建議，但每次都有些不起作用請如果有人能幫助我至少有一個理想的選擇，而且我最重要的是不允許使用JQuery，只能使用Java Script。如果你有問題，而且你不明白代碼的任何部分，請問我，我很樂意解釋或重寫。我要感謝你提前對您有所幫助。PS我在編碼初學者，那我可能會問愚蠢questions.Please的原因有耐心。如何將地理位置（通過Googlemaps顯示）保存到本地存儲並稍後加載

var x = document.getElementById("map"); 
 

 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
    x.style.visibility = "visible"; 
 
    navigator.geolocation.getCurrentPosition(showPosition, showError); 
 
    } else { 
 
    x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 

 
function showPosition(position) { 
 
    var latlon = position.coords.latitude + "," + position.coords.longitude; 
 

 
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false"; 
 
    document.getElementById("map").innerHTML = "<img src='" + img_url + "'>"; 
 
} 
 

 
function showError(error) { 
 
    switch (error.code) { 
 
    case error.PERMISSION_DENIED: 
 
     x.innerHTML = "User denied the request for Geolocation." 
 
     break; 
 
    case error.POSITION_UNAVAILABLE: 
 
     x.innerHTML = "Location information is unavailable." 
 
     break; 
 
    case error.TIMEOUT: 
 
     x.innerHTML = "The request to get user location timed out." 
 
     break; 
 
    case error.UNKNOWN_ERROR: 
 
     x.innerHTML = "An unknown error occurred." 
 
     break; 
 
    } 
 
}

#text { 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
} 
 
#buttons { 
 
    width: 100%; 
 
    background-color: #8c8c8c; 
 
    color: white; 
 
    border: 2px solid #8c8c8c; 
 
    padding-top: 2px; 
 
} 
 
#map { 
 
    width: 100%; 
 
    border: 2px solid #8c8c8c; 
 
    border-bottom-right-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
    visibility: hidden; 
 
    background-color: #cccace; 
 
} 
 
.buttons { 
 
    border-top-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
}

<body> 
 
<div id="text">Домашна върху HTML5 API &amp; Rounded Corners</div> 
 
<div id="buttons"> 
 
    Местоположение: 
 
    <input type="button" class="buttons" value="Вземи" onclick="getLocation()" /> 
 
    <input type="button" class="buttons" value="Запази" onclick="saveLocation" /> 
 
    <input type="button" class="buttons" value="Зареди" onclick="loadLocation" /> 
 
</div> 
 
<div id="map"></div> 
 
</body>

來源

2016-10-22 Marin Atanasov

要保存的地理位置，你只儲存它，如果它是一個關聯數組：

navigator.geolocation.getCurrentPosition(function(p){ 
    localStorage.setItem("latitude", p.coords.latitude); 
    localStorage.setItem("longitude", p.coords.longitude) 
}, function(e){console.log(e)})

後來你只需加載這樣的：

var lat = localStorage.latitude; 
var lon = localStorage.longitude;

來源

2016-10-22 10:16:18 Leo

感謝隊友。我遵循你的建議，它的工作。我還添加了兩個警報窗口來顯示我的位置何時保存以及加載座標是什麼。感謝您的幫助。欣賞它。 –

不客氣！ – Leo

嗨。又是我。我有一個小問題。有沒有辦法保存座標，但不要求共享位置。我的意思是，當我想保存已經加載的位置時，它會再次加載我分享它的權限，然後保存它。我只想保存已經從以前的功能位置加載。 –

如何將地理位置（通過Googlemaps顯示）保存到本地存儲並稍後加載

回答

相關問題