Question

您好我使用googlemaps api获取我的位置。它运作完美。我试图将其获得的经度和纬度插入我的输入框，使用Jquery进一步使用。当我尝试使用Jquery编辑我的文本框时，即使我使用静态值，我的文本框也没有变化。这是我的代码。我评论了非工作部分。

<?php
include_once 'dbconfig.php';
?>
<script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 12
  });
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

        //THIS PART IS NOT WORKING
        $('#tb1').val(lat);
        $('#tb2').val(lng);
        $('#tb2').val('test');


      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}



function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAwFgO9_-PfY3KufIH-8vgHeBR8sdpZ_VQ&signed_in=true&callback=initMap"
        async defer>
    </script>

<script>
    $( document ).ready(function() {

    });
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<label>GIS</label>
</div>
<div id="body">

    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 20%;
        widhth: 100%;
      }
    </style>
  </head>
   <div id="map"></div>
  <body>




    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="textbox" name="tb1" id='tb1'/>
    <input type="textbox" name="tb2" id='tb2'/>
    <input type="file" name="file" />
    <button type="submit" name="btn-upload">upload</button>
    </form>


</div>
</body>
</html>

Answer 1

而不是：

$('#tb1').var(lat);

使用：

$('#tb1').val(pos.lat);

Answer 2

此时没有 lat 或 lng 值。

你所拥有的是一个 pos 对象，它有两个属性： lat 和 lng 。

var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

所以你应该使用：

    //THIS PART SHOULD WORK NOW
    $('#tb1').val(pos.lat);
    $('#tb2').val(pos.lng);

Answer 3

问题是由

引起的

没有

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

使用Jquery将值插入文本框

3 个答案: