Question

我正在使用JavaScript函数（GeoLocation）来获取访问者的当前位置。我只是一个Javascript副本和贴纸，所以如果我的问题的解决方案显而易见，我道歉。

要求访问者点击按钮获取他们的位置，此时GeoLocation返回该lat和long以及地图 - 我相信你知道它是如何工作的：）

但是，我还希望使用完成的GeoLocation返回另一个元素（确认按钮 - HTML表单按钮） - 而不是之前。

以下是我页面的基本代码。任何人都可以解释如何隐藏表单（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>

Answer 1

我认为您的表单默认是隐藏的。然后你可以为谷歌地图添加一个监听器：

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

显然，Google用来告诉你地图已加载的事件是“空闲”。所以你会：

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

Answer 2

所以我只是将它添加到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" />' ;

感谢大家的投入：）

Answer 3

首先，隐藏你的表格：

<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/

在Javascript函数完成上显示HTML元素

3 个答案: