gpt4 book ai didi

javascript - 如何获取使用地理定位创建的动态内容并在另一个 div 中使用它?

转载 作者:行者123 更新时间:2023-11-28 08:58:23 25 4
gpt4 key购买 nike

编辑:让我修改一下我的声明!我能够生成位置,但我似乎无法访问 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com