在Javascript上顯示HTML元素功能完成

我正在使用JavaScript函數（GeoLocation）來獲取訪客當前位置。我只是一個Javascript副本和貼紙，所以我很抱歉，如果我的問題的解決方案是顯而易見的。在Javascript上顯示HTML元素功能完成

遊客被要求點擊一個按鈕來得到他們的位置，在這一點GeoLocation中返回lat和長加上地圖 - 我敢肯定，你知道它是如何工作:)

不過，我也想返回另一個元素（確認按鈕 - HTML表單按鈕）與完成的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>

來源

2013-07-04 user2246804

基本上，你想一旦地圖加載運行一些代碼？ – mael

基本上，是的。甚至沒有運行 - 只是顯示。 – user2246804

只需將代碼隱藏在'getCurrentPosition'回調中的元素即可。你一旦得到結果就已經在做東西了（比如居中放置地圖），所以你應該知道如何做到這一點。 –

所以我簡單地將此添加到getLocation（）函數，這解決了我的問題。正如指出的那樣，我在做類似的東西反正與地圖 - 只需要複製它的表單元素：

document.getElementById('form').innerHTML = 
    '<input type = "hidden" id = "latitude" value = "latitude"/>' + 
    '<input type = "hidden" id = "longitude" value = "longitude"/>' + 
    '<input type = "submit" value = "Confirm Location" />' ;

感謝所有爲您的輸入:)

來源

2013-07-04 21:25:24 user2246804

我不能接受這兩天。但這是回答。 – user2246804

我認爲你的表單應該默認隱藏。然後，你可以添加一個監聽器，谷歌地圖：

google.maps.event.addListener(map, 'event', function)

顯然，由谷歌使用的事件告訴大家，在地圖載入被「閒置」。所以你應該有：

google.maps.event.addListener(map, 'idle', function() { 
//code to show the form 
});

來源

2013-07-04 21:13:51 mael

感謝您的答案梅爾，我的解決方案如下。 – user2246804

第一，隱藏表單：

<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'; 
    (...) 
});

畫布爲n AMED map_canvas提供，而不是google_canvas :)

http://jsfiddle.net/PRUpX/

來源

2013-07-05 07:06:49 jsan

在Javascript上顯示HTML元素功能完成

回答

相關問題