如何将地理位置（通过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显示）保存到本地存储并稍后加载

回答

相关问题