如何在Autodesk Forge Viewer自定义GeoThreeExtension中使用Google API密钥

核心修改步骤 #

• 优先加载Google Maps API脚本
  在页面的<head>中替换原Bing地图脚本，引入Google Maps JS API，必须包含geometry库（扩展依赖地理计算能力）：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的Google API密钥&libraries=geometry"></script>
  

• 替换地图提供者初始化代码
  找到扩展中初始化Bing地图的代码段，直接替换为Google地图提供者：

  // 原Bing初始化代码
  // var provider = new Geo.BingMapsProvider("BING_KEY");
  // 替换为
  var provider = new Geo.GoogleMapsProvider("你的Google API密钥");
  

  如需指定地图类型（如卫星图），可添加第二个参数：

  var provider = new Geo.GoogleMapsProvider("你的Google API密钥", "satellite");
  

• 配置Google API密钥权限
  确保你的API密钥已启用Maps JavaScript API，并在Google Cloud控制台设置了正确的HTTP referrer限制（允许你的网站域名访问），否则会出现API调用被拒的错误。

• 确认扩展初始化流程
  在扩展的load方法中，保证地图提供者初始化完成后再传递给GeoView实例：

  this.viewer.loadExtension('Autodesk.Viewing.GeoView').then((geoView) => {
    const provider = new Geo.GoogleMapsProvider("你的Google API密钥");
    geoView.setMapProvider(provider);
    // 后续模型地理对齐等逻辑...
  });
  

常见问题排查 #

• 若提示Geo.GoogleMapsProvider is not defined：检查Google Maps API脚本是否在Forge Viewer和geo-three-ext脚本之前加载，顺序不能颠倒。
• 若地图空白或报403错误：核对API密钥的权限配置，确认启用了正确的API服务，且referrer限制未拦截当前域名。
• 若模型与地图对齐异常：无需额外转换坐标，Google Maps和Bing均采用WGS84坐标系，问题大概率出在模型的地理坐标参数设置上。

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