Google Apps Script报错求助：实现地图半径内外位置展示

问题概述 #

开发功能时遇到UserCodeAppPanel Error，功能目标是通过SpreadsheetApp读取表格中的经纬度信息，借助Google Maps API在地图上展示指定半径范围内外的位置，目前运行报错。

错误截图 #

原Index.html代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Draw Circles using Google Map API</title> 
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyArRKMKMbDrCz1h1KKpKbfqOfzNGfZiT_o"></script>
    <!--PLEASE NOTE: As of June 22 2016, Google Maps require an API key.
    * GET YOUR API KEY FROM ... https://developers.google.com/maps/documentation/javascript/get-api-key
    * ONCE YOU GET THE KEY, REPLACE 'js?sensor=false' IN THE ABOVE URL WITH "js?key=YOUR_NEW_API_KEY".--> 
</head>

<body>
    <div id="mapContainer" style="width:750px;height:350px;"></div>
</body>
</html>

<script>
  
    // LOCATION IN LATITUDE AND LONGITUDE. 
    function onFormSubmit(event) {
       var ss = SpreadsheetApp.getActiveSheet();
        // MAP ATTRIBUTES
        var center = new google.maps.LatLng(33.6608243, -84.4954219);
        var mapAttr = {
            center: center,
            zoom: 10,

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // THE MAP TO DISPLAY.
        var map = new google.maps.Map(document.getElementById("mapContainer"), mapAttr);
    

        var circle = new google.maps.Circle({
            center: center,
            map: map,
            radius: 16093.40,          // IN METERS.
            fillColor: '#FF6600',
            fillOpacity: 0.3,
            strokeWeight: 0,        // DON'T SHOW CIRCLE BORDER.
            content:'<h1>Atlanta Community Food FoodBank</h1>'
  
        });  

        var marker = new google.maps.Marker({
          position:{lat:33.6608243, lng:-84.4954219},
        map:map,
        icon: 'https://img.icons8.com/fluent/48/000000/marker.png',
        draggable: false
        });

        var information = new google.maps.InfoWindow({
          content: '<h4>Atlanta Community Food Bank</h4>'
        }); 

        marker.addListener('click', function() {
          information.open(map, marker);
        })

        var lastRow = ss.getLastRow();
        var markers = "coords:[{lat:"+ss.getRange('D2').getValue()+", "+"lng:"+ss.getRange('E2').getValue()+"}]";
        
        
     
        for(var i = 1; i < markers.length; i++){
          addMarker(markers[i]);
        }

        function addMarker(props){
          var marker = new google.maps.Marker({
            position:props.coords,
            map:map,
          })
        }

    }
   
    google.maps.event.addDomListener(window, 'load', onFormSubmit);
</script>
</html>

相关文件截图 #

问题排查 #

1. 服务端API非法调用：SpreadsheetApp.getActiveSheet()是Google Apps Script服务端API，不能在客户端HTML的脚本中直接调用，这是触发UserCodeAppPanel Error的核心原因。
2. HTML结构错误：代码中存在两个</html>标签，导致HTML文档结构无效。
3. 数据处理逻辑错误：将经纬度数据拼接成字符串markers，后续循环遍历字符串的单个字符，完全不符合数组遍历的逻辑。
4. 无效属性配置：Google Maps的Circle对象没有content属性，该配置无效。

修复方案 #

1. 修改Code.gs文件 #

编写服务端函数获取表格数据，并通过doGet()返回HTML页面：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

// 获取表格中的经纬度数据
function getLatLngData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var lastRow = ss.getLastRow();
  // 从第2行开始读取D、E列的经纬度数据
  var dataRange = ss.getRange(2, 4, lastRow - 1, 2);
  var data = dataRange.getValues();
  var coordsList = [];
  
  data.forEach(function(row) {
    // 过滤空数据
    if (row[0] && row[1]) {
      coordsList.push({lat: row[0], lng: row[1]});
    }
  });
  
  return coordsList;
}

2. 修改Index.html文件 #

修正HTML结构，通过google.script.run调用服务端函数获取数据，修复地图标记逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>Draw Circles using Google Map API</title> 
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyArRKMKMbDrCz1h1KKpKbfqOfzNGfZiT_o"></script>
    <!--PLEASE NOTE: As of June 22 2016, Google Maps require an API key.
    * GET YOUR API KEY FROM ... https://developers.google.com/maps/documentation/javascript/get-api-key
    * ONCE YOU GET THE KEY, REPLACE 'js?sensor=false' IN THE ABOVE URL WITH "js?key=YOUR_NEW_API_KEY".--> 
</head>

<body>
    <div id="mapContainer" style="width:750px;height:350px;"></div>

    <script>
        // 初始化地图并添加标记
        function initMap(coordsData) {
            // 地图基础配置
            var center = new google.maps.LatLng(33.6608243, -84.4954219);
            var mapAttr = {
                center: center,
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("mapContainer"), mapAttr);

            // 添加半径范围圆
            new google.maps.Circle({
                center: center,
                map: map,
                radius: 16093.40,
                fillColor: '#FF6600',
                fillOpacity: 0.3,
                strokeWeight: 0
            });  

            // 添加中心标记及信息窗口
            var centerMarker = new google.maps.Marker({
                position:{lat:33.6608243, lng:-84.4954219},
                map:map,
                icon: 'https://img.icons8.com/fluent/48/000000/marker.png',
                draggable: false
            });

            var centerInfo = new google.maps.InfoWindow({
                content: '<h4>Atlanta Community Food Bank</h4>'
            }); 

            centerMarker.addListener('click', function() {
                centerInfo.open(map, centerMarker);
            });

            // 遍历添加表格中的位置标记
            coordsData.forEach(function(coords) {
                addMarker(coords, map);
            });
        }

        // 创建单个标记
        function addMarker(coords, map){
            var marker = new google.maps.Marker({
                position: coords,
                map: map
            });

            // 标记绑定信息窗口
            var infoWindow = new google.maps.InfoWindow({
                content: `<h4>位置：${coords.lat}, ${coords.lng}</h4>`
            });
            marker.addListener('click', function() {
                infoWindow.open(map, marker);
            });
        }

        // 页面加载时调用服务端函数获取数据并初始化地图
        window.onload = function() {
            google.script.run.withSuccessHandler(initMap).getLatLngData();
        };
    </script>
</body>
</html>

修复核心要点 #

• 服务端与客户端分离：通过google.script.run异步调用服务端函数获取表格数据，避免在客户端直接调用服务端API。
• 修正HTML结构：移除多余的</html>标签，确保文档结构合法。
• 数据逻辑修复：服务端返回结构化的坐标数组，客户端遍历数组添加标记，解决原字符串遍历的错误。
• 移除无效配置：删除Circle对象的content无效属性。

内容的提问来源于stack exchange，提问作者Wendy Frazier