如何在Qualtrics中通过JavaScript嵌入HERE Maps API并显示地图？

核心问题排查与修正 #

1. 补全API脚本引入
   你之前在通用设置头部只写了src属性，缺少完整的<script>标签，导致HERE Maps的核心脚本未正确加载。需在Qualtrics「外观」→「高级」→「头部HTML」中添加完整的脚本及样式引用：

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

2. 添加地图容器
   短文本输入框是<input>元素，无法作为地图渲染容器。需在问卷中添加一个「描述文本」问题，编辑其HTML内容为带明确宽高的容器：

<div id="mapContainer" style="width: 100%; height: 400px; border: 1px solid #ccc;"></div>

（宽高必须设置，否则地图无尺寸可渲染）

3. 在Qualtrics就绪事件中初始化地图
   Qualtrics的页面元素是动态渲染的，不能直接执行初始化代码，需绑定到问卷的就绪事件中。点击上述「描述文本」问题的齿轮图标→「添加JavaScript」，插入以下代码：

Qualtrics.SurveyEngine.addOnReady(function() {
    // 确认容器存在后再执行
    var mapContainer = document.getElementById('mapContainer');
    if (!mapContainer) return;

    // 初始化HERE平台
    var platform = new H.service.Platform({
        'apikey': '你的API密钥'
    });

    // 获取默认地图图层
    var maptypes = platform.createDefaultLayers();

    // 渲染地图
    var map = new H.Map(
        mapContainer,
        maptypes.vector.normal.map,
        {
            zoom: 10,
            center: { lng: 13.4, lat: 52.51 }
        }
    );

    // 可选：添加地图交互功能（缩放、拖拽）
    var ui = H.ui.UI.createDefault(map, maptypes);
    var mapEvents = new H.mapevents.MapEvents(map);
    var behavior = new H.mapevents.Behavior(mapEvents);
});

常见注意事项 #

• 确保API密钥有效，且已开启HERE Maps的相关服务权限
• 地图容器的宽高不可省略，否则地图会因无尺寸而无法显示
• 不要在短文本问题的JS中直接执行初始化，需等待Qualtrics的DOM完全加载

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