如何触发Google Geochart加载？需用户输入数据后绘制/刷新地图

完全可以通过自定义触发函数来加载或刷新地图，不需要在页面加载阶段执行绘制逻辑，完美适配用户输入完成后再生成地图的场景。

实现步骤 #

1. 预加载Geochart依赖库，不立即绘制
   先引入Google Charts加载器并加载Geochart包，但暂不执行绘制操作：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// 加载Geochart包，等待后续触发
google.charts.load('current', {'packages':['geochart']});
</script>

2. 定义绘制地图的可触发函数
   封装一个接受用户数据的绘制函数，内部完成数据格式化、图表初始化与绘制：

function drawGeoChart(userProvidedData) {
    // 将用户数据转换为Geochart要求的格式
    const chartData = google.visualization.arrayToDataTable(userProvidedData);
    
    // 自定义地图配置（可根据需求调整）
    const chartOptions = {
        region: 'world',
        displayMode: 'regions',
        colorAxis: {colors: ['#f0f0f0', '#0066cc']}
    };

    // 初始化图表实例并绘制
    const chart = new google.visualization.GeoChart(document.getElementById('map-container'));
    chart.draw(chartData, chartOptions);
}

3. 绑定用户输入完成事件，触发绘制
   监听用户的确认操作（比如点击按钮、提交表单），收集输入数据后调用绘制函数：

<!-- 示例用户输入表单 -->
<input type="number" id="china-val" placeholder="中国数值">
<input type="number" id="us-val" placeholder="美国数值">
<button onclick="generateMap()">生成地图</button>

<!-- 地图容器 -->
<div id="map-container" style="width: 800px; height: 500px;"></div>

<script>
function generateMap() {
    // 收集用户输入的数据（实际场景根据表单结构调整）
    const userData = [
        ['国家', '数值'],
        ['China', parseInt(document.getElementById('china-val').value) || 0],
        ['United States', parseInt(document.getElementById('us-val').value) || 0]
    ];

    // 触发地图绘制
    drawGeoChart(userData);
}
</script>

4. 刷新地图的方式
   如果用户修改输入后需要更新地图，只需再次调用drawGeoChart并传入新数据即可——Geochart会自动覆盖原有地图内容，无需手动销毁旧图表实例。

注意事项 #

• 确保Google Charts库在用户触发绘制前已加载完成，若页面加载较慢，可在绘制函数中增加加载状态判断，或把核心逻辑放在google.charts.setOnLoadCallback回调内；
• 用户输入的数据必须符合Geochart的格式要求：二维数组，首行为表头，后续行对应地理标识（如国家代码/名称）和数值。

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