如何将HTML纬度和经度传入谷歌反向地理编码以生成JSON数据?

时间:2018-04-04 21:44:40

标签: ajax html5 google-maps google-maps-api-3 google-geolocation

我正在尝试根据HTML lat / long数据生成地理位置数据(可读地址)。

我无法使用以下内容从google maps api请求JSON输出。控制台窗口中没有返回任何内容。我主要是尝试将HTML lat / long参数传递给ajax块。在网址行中只有“pos”的语法错误是什么?任何建议都将不胜感激。

<body>
<div>
  <p>Click the button to get your coordinates.</p>

  <button onclick="getLocation()">Show Location</button>

  <p id="demo"></p>
</div>  
  <script>
  var x = document.getElementById("demo");

  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
          x.innerHTML = "Geolocation is not supported by this browser.";
      }
  }

  function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude + 
      "<br>Longitude: " + position.coords.longitude;
  }
</script>
// Try HTML5 geolocation.
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

<div id="map"></div>
        <script>

          var map, infoWindow;

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

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

                infoWindow.setPosition(pos);

                infoWindow.setContent('Location found.');

                infoWindow.open(map);
                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.');
            infoWindow.open(map);
          }
        </script>    

<script src="https://maps.googleapis.com/maps/api/js?key=************&callback=initMap">

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

        $.ajax({

          url: "https://maps.googleapis.com/maps/api/geocode/json?latlng="+pos+"&key=*********",
          type: "GET",
          success: function (data) {
            console.log(data)

          }

        })
        </script>

更新****添加了*****

中的所有代码

0 个答案:

没有答案