在Javascript函数上显示HTML元素完成
在Javascript函数上显示HTML元素完成
提问于 2013-07-05 05:04:16
我使用一个JavaScript函数(GeoLocation)来获取访问者的当前位置。我只是一个Javascript拷贝和粘贴，所以我道歉，如果我的问题的解决方案是显而易见的。
访问者被要求点击一个按钮来获取他们的位置，在这一点上，GeoLocation会返回最新和最长的信息，外加一张地图-我相信你知道它是如何工作的:)
但是，我也想返回另一个元素(确认按钮- HTML form按钮)，其中包含完整的GeoLocation -而不是之前。
下面是我的页面中的基本代码。谁能解释一下如何隐藏表单(id =‘表单)，直到GeoLocation函数返回结果？
<button onclick="getLocation()" id = 'getloc'>Get your location now</button>
<div id="map_canvas"></div>
<form id = 'confirm'>
<input type = 'hidden' id = 'latitude' value = 'latitude'/>
<input type = 'hidden' id = 'longitude' value = 'longitude'/>
<input type = 'submit' value = 'Confirm Your Location'/>
</form>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function getLocation(){
if(!!navigator.geolocation) {
var map;
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),latitude=document.getElementById("latitude"),longitude=document.getElementById("longitude");;
var infowindow = new google.maps.InfoWindow({
map: map,
position: geolocate,
content:
'<h1>Your Current Location</h1>' +
'<h2>Latitude: ' + position.coords.latitude + '</h2>' +
'<h2>Longitude: ' + position.coords.longitude + '</h2>'
});
map.setCenter(geolocate);
latitude.value = position.coords.latitude;
longitude.value = position.coords.longitude;
});
} else { document.getElementById('map_canvas').innerHTML = 'No Geolocation Support.';
}
};
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-05 05:25:24
所以我简单地将它添加到getLocation()函数中，这就解决了我的问题。正如前面所指出的，我对map做了类似的事情--只需要将它复制到form元素：
document.getElementById('form').innerHTML =
'<input type = "hidden" id = "latitude" value = "latitude"/>' +
'<input type = "hidden" id = "longitude" value = "longitude"/>' +
'<input type = "submit" value = "Confirm Location" />' ;感谢所有人的投入:)
Stack Overflow用户
发布于 2013-07-05 05:13:52
我认为默认情况下你的表单应该是隐藏的。然后，您可以向google地图添加一个侦听器：
google.maps.event.addListener(map, 'event', function)显然，google用来告诉你地图已加载的事件是"idle“。所以你会有：
google.maps.event.addListener(map, 'idle', function() {
//code to show the form
});Stack Overflow用户
发布于 2013-07-05 15:06:49
首先，隐藏你的表单：
<form id = 'confirm' style="display: none;">然后，当地理定位完成后，显示它：
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById('getloc').style.display = 'none';
document.getElementById('latitude').value = position.coords.latitude;
document.getElementById('longitude').value = position.coords.longitude;
document.getElementById('confirm').style.display = 'block';
(...)
});您的画布名为map_canvas，而不是google_canvas :)
http://jsfiddle.net/PRUpX/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17478079
复制相关文章
相似问题
腾讯云开发者
