如何在Blazor WASM应用中接入Google Maps或其他地图API实现PWA？

Google Maps 接入步骤 #

Blazor WASM 运行在客户端浏览器环境，可通过 JS 互操作直接调用前端地图 API，和 Blazor Server 架构的交互逻辑不同，不需要依赖服务端通信，具体实现步骤如下：

• 第一步：引入 Google Maps JS 资源
  在项目 wwwroot/index.html 文件的 <head> 标签中加入地图脚本，替换为你自己申请的 Google Maps API 密钥：

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

• 第二步：封装 JS 互操作方法
  在 wwwroot/js 目录下新建 mapInterop.js 文件，写入地图初始化、标记添加等基础方法：

  window.initMap = (elementId, lat, lng) => {
    const mapOptions = {
      center: { lat: lat, lng: lng },
      zoom: 12
    };
    new google.maps.Map(document.getElementById(elementId), mapOptions);
  };
  

  然后在 index.html 的 <body> 标签末尾引入该自定义JS文件：

  <script src="js/mapInterop.js"></script>
  

• 第三步：Blazor 组件调用
  新建地图组件（例如 Map.razor），注入 IJSRuntime 调用封装好的JS方法，在组件首次渲染完成后初始化地图：

  @inject IJSRuntime JSRuntime
  @page "/map"
  
  <div id="googleMap" style="width:100%;height:600px;"></div>
  
  @code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
      if (firstRender)
      {
        // 传入容器ID、默认纬度、经度
        await JSRuntime.InvokeVoidAsync("initMap", "googleMap", 39.9042, 116.4074);
      }
    }
  }
  

替代地图方案 #

如果不想使用 Google Maps，可选择开源免费的 Leaflet 地图，接入逻辑和上述步骤完全一致：

1. 先在 index.html 中引入 Leaflet 的CSS和JS资源
2. 封装对应的 JS 互操作方法
3. 在Blazor组件中调用初始化即可
   Leaflet 不需要申请API密钥即可使用基础地图功能，轻量易扩展，适合轻量项目使用。

PWA 适配注意事项 #

你当前选择的 Blazor WASM 架构本身完全支持PWA打包，接入地图不会有架构层面的冲突，仅需要在PWA配置的 service-worker.js 中，将地图相关的静态资源加入缓存白名单即可正常离线使用基础功能。

新手简化方案 #

如果不想手动封装JS互操作逻辑，可直接使用社区封装好的NuGet包，例如 Blazor.GoogleMaps、Blazor.Leaflet，安装后按照包说明配置API密钥，即可直接使用封装好的地图组件，不需要额外写JS代码，更适合无Blazor开发经验的开发者快速实现功能。

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