0

我正在使用 JavaScript 函数 (GeoLocation) 来获取访问者的当前位置。我只是一个 Javascript 副本和粘贴者，所以如果我的问题的解决方案很明显，我深表歉意。

访问者被要求单击一个按钮来获取他们的位置，此时 GeoLocation 会返回该纬度和经度以及一张地图 - 我相信你知道它是如何工作的 :)

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

以下是我页面中的基本代码。谁能解释如何在 GeoLocation 函数返回结果之前隐藏表单（id = 'form）？

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

3 回答 3

0

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

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

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

google.maps.event.addListener(map, 'idle', function() {
//code to show the form
});
于 2013-07-04T21:13:51.613 回答
0

所以我只是将它添加到 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-04T21:25:24.257 回答
0

首先，隐藏您的表单：

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

于 2013-07-05T07:06:49.163 回答