编辑:让我修改一下我的声明!我能够生成位置，但我似乎无法访问 dom 内的数据，因此我可以在我想要发送的电子邮件中使用它。该地址出现在 firebug 的 HTML 中，但是当我将其显示在另一个 div 中时，它不会显示。
本质上，在确定位置并将其加载到 DOM 中之后，我希望能够通过电子邮件发送它。当我在加载文档后选择 div#address 时，它只返回一个空字符串。我如何才能访问该动态内容？
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/locate-me.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
writeAddressName(userLatLng);
var myOptions = {
zoom : 13,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
$('#error').appendTo(writeAddressName(userLatLng));
}
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementById("address").innerHTML = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
var postAdd = $('#address').html();
$('#error').html(postAdd);
</script>
</head>
<body>
<header>
<h1>Locate Me</h1>
</header>
<section id="map"></section>
<section>
<h2 class="address-block">Address:</h2>
<aside type="text" name="address" id="address" data="address"></aside>
<p id="error">4</p>
<section>
<form method='post' action='include/contact.php' id='form'>
<!-- Name: <input type='text' name='name' required id='name'><br> -->
Email: <input type='email' name='email' required id='email'><br>
<input type='submit' value='Send'>
</form>
</body>
</html>
最佳答案
在 geolocationSuccess() 函数外部定义变量 userLatLng，否则只能在函数内部访问它。
同时，您可以将该变量的值分配给隐藏输入并通过电子邮件发送。
交换它们的顺序:
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
为此:
var userLatLng;
function geolocationSuccess(position) {
userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
主要修改:
我可以通过在正文标记关闭之前添加此内容来访问内容:
<script>
$("#the_trigger").click(function(){
alert($("#address").html());
});
</script>
并将 ID“the_trigger”添加到提交按钮。
<input id="the_trigger" type='submit' value='Send'>
关于javascript - 如何获取使用地理定位创建的动态内容并在另一个 div 中使用它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18137099/