1

编辑：让我修改我的声明！我能够生成位置，但我似乎无法访问 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>
4

1 回答 1

0

在 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);

主要编辑：

我可以通过在 body 标签关闭之前添加它来访问内容：

<script>
 $("#the_trigger").click(function(){
  alert($("#address").html());
 });
</script>

并将“the_trigger”的 ID 添加到提交按钮。

<input id="the_trigger" type='submit' value='Send'>
于 2013-08-08T22:19:44.520 回答