如何从我从 google 地理编码器获取的纬度和经度获取位置名称并使用应用程序脚本在网络应用程序中显示

Question

我可以使用来自 google 的地理编码器读取纬度和经度。但是当我尝试从 JSON 对象获取位置名称时，网络应用程序无法显示它。然后尝试在警报中显示。什么？是的，Alert 可以显示整个地址。然后再次尝试使用 document.getElementById('id') 在 webApp 中显示相同但无法显示。

这是我的 yetanotherDist.HTML GAS 项目文件代码。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key="APIKey"></script>
    <script src= "https://maps.googleapis.com/maps/api/js"></script>
    <script>
  window.onload = function() {
  var startPos;
  var geoOptions = {
    enableHighAccuracy: true
  }

    var geoSuccess = function(position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
    var latlong = new google.maps.LatLng(currentLat, currentLong);

    fromLat =startPos.coords.latitude;
    fromLng = startPos.coords.longitude;
    toLat = 48.8567;
    toLng = 2.3508;
    distance = google.maps.geometry.spherical.computeDistanceBetween(
    new google.maps.LatLng(fromLat, fromLng), 
    new google.maps.LatLng(toLat, toLng));
    document.getElementById("Distance").innerHTML = distance;


    geocoder.geocode({'latLng':latlong}, function(results, status){
    if (status == google.maps.GeocoderStatus.OK)
    {
    if (results)
    {
    document.getElementById("Location").innerHTML = latlong;
    document.getElementById("Address").innerHTML = results[0].formatted_address;
    alert(results[0].formatted_address);
    }
    }
    else
    alert("Could not get the geolocation information");
    });

  };

    var geoError = function(error) {
    console.log('Error occurred. Error code: ' + error.code);
    // error.code can be:
    //   0: unknown error
    //   1: permission denied
    //   2: position unavailable (error response from location provider)
    //   3: timed out
  };
    navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
    
    </script>
  </head>
  <body>
<div id="startLat">startLat</div>
<div id="startLon">startLon</div>
<div id="Location">Location</div>
<div id="Address">Address</div>
<div id="Distance">Distance</div>
</body>
</html>

这是 code.gs 文件

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('yetanotherDist');

  return htmlOutput.evaluate();
}

很有趣，但我无法理解为什么不能在webapp中显示位置名称。或者我可能会遗漏一些东西。请帮忙。

Answer 1

您发布的代码中有几个错误，这让我怀疑那是真实的代码还是只是幻想'-)

https://maps.googleapis.com/maps/api/js?key="APIKey"

键前不应该有那个多余的"。

您尚未声明 [=13=] 引用，但您说您的代码能够找到（&alert）地址 - 好奇吗？！

在测试中，我通过 lat/lng 使用 Dev Tools 传感器将位置欺骗到 Google 山，地理编码结果精确定位 Google HQ，所以我猜它有效。

<!DOCTYPE html>
<html>
  <head>
        <style>
            div:before{content:attr(id)': ';color:red;}
            body{padding:5rem;font-family:courier}
        </style>
        <base target="_top">

        <script src="//maps.google.com/maps/api/js?libraries=geometry&key=APIKEY"></script>
        <script>
            window.onload = function() {
                var startPos;
                var geoOptions = {
                    enableHighAccuracy: true
                };


                let geocoder=new google.maps.Geocoder();
                
                
                
                var geoSuccess = function(position) {
                    startPos = position;
                    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
                    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
                    
                    var latlong = new google.maps.LatLng( startPos.coords.latitude, startPos.coords.longitude );

                    fromLat = startPos.coords.latitude;
                    fromLng = startPos.coords.longitude;
                    
                    toLat = 48.8567;
                    toLng = 2.3508;
                    
                    
                    distance = google.maps.geometry.spherical.computeDistanceBetween(
                        new google.maps.LatLng(fromLat, fromLng), 
                        new google.maps.LatLng(toLat, toLng)
                    );
                    document.getElementById("Distance").innerHTML = distance;


                    geocoder.geocode({'latLng':latlong}, function(results, status){
                        if (status == google.maps.GeocoderStatus.OK){
                            if (results){
                                document.getElementById("Location").innerHTML = latlong;
                                document.getElementById("Address").innerHTML = results[0].formatted_address;
                            }
                        } else {
                            alert("Could not get the geolocation information");
                        }
                    });
                };

                var geoError = function(error) {
                    console.log('Error occurred. Error code: ' + error.code);
                };
                
                
                navigator.geolocation.getCurrentPosition( geoSuccess, geoError, geoOptions );
            }

        </script>
    </head>
    <body>
        <div id="startLat">startLat</div>
        <div id="startLon">startLon</div>
        <div id="Location">Location</div>
        <div id="Address">Address</div>
        <div id="Distance">Distance</div>
    </body>
</html>

如何从我从 google 地理编码器获取的纬度和经度获取位置名称并使用应用程序脚本在网络应用程序中显示

How to get name of the location from Latitude and Longitude I am getting from google geocoder and display in web-app done using apps script

google-maps

web-applications

geolocation

google-apps-script