BlazorGoogleMaps 使用教程

BlazorGoogleMaps 使用教程

BlazorGoogleMaps Blazor interop for GoogleMap library 项目地址: https://gitcode.com/gh_mirrors/bl/BlazorGoogleMaps

1. 项目目录结构及介绍

BlazorGoogleMaps 是一个旨在简化 Blazor 应用程序中集成 Google Maps 的库。下面是该仓库的基本目录结构及其大致功能介绍：

BlazorGoogleMaps/
│
├── ClientSideDemo      - 示例应用，展示在 Blazor WebAssembly 中如何使用该库。
├── ServerSideDemo      - 另一组示例，专注于在服务器端 Blazor 中的应用实例。
├── GoogleMapsComponents - 包含与 Google Maps 交互的核心组件代码。
│   ├── Maps             - 实现地图相关功能的组件。
│   └── ...              - 其他可能的地图组件或辅助类。
├── src                 - 主要源代码存放位置，根据项目类型（如WASM或Server）分隔。
├── .gitignore          - 版本控制忽略文件配置。
├── LICENSE             - 许可证文件，表明该项目遵循 MIT 许可。
├── README.md           - 项目的主要说明文件，包括安装和基本使用的快速指南。
└── package.json        - 项目依赖管理和构建脚本配置（如果存在）。

每个演示应用程序通常包含.razor页面、模型和服务，展示了如何在实际应用中将 Google Maps 组件嵌入到页面中，并与之进行交互。

2. 项目的启动文件介绍

对于 Blazor 项目，启动文件取决于应用程序的模式（WebAssembly 或 Server）:

• WebAssembly (WASM) 模式：

  • 主入口点通常是 Client 文件夹下的 Program.cs，负责初始化 Blazor 客户端应用。
  • 配合 _Host.html 文件，在其中添加必要的 Google Maps 脚本标签来加载地图库。

• 服务器端 (Server) 模式：

  • 启动逻辑主要在 Server 文件夹中的 Startup.cs 文件，配置服务以及中间件。
  • _Host.cshtml 文件用于设置服务器端渲染的基础布局，同样可以在此添加地图所需的脚本引用。

此外，BlazorGoogleMaps 的启动过程也涉及到通过 DI（依赖注入）在 Startup.cs 或配置相关的服务中注册其服务和关键组件。

3. 项目的配置文件介绍

主配置文件

• .csproj: 每个Blazor项目都有一个.csproj文件，定义了项目属性、编译选项和所依赖的包。

• appsettings.json: 尽管教程没有直接提到这个文件，但在一些场景下，你可以使用它来存储Google Maps API密钥等配置信息，尤其是在想要动态管理这些敏感数据时。

使用Google Maps的配置

• 在 Blazor 应用中集成 Google Maps 不是通过传统配置文件完成的，而是通过代码配置。你需要在服务配置阶段添加Google Maps的支持，这通常发生在Startup.cs文件的ConfigureServices方法内。

  services.AddBlazorGoogleMaps("YOUR_API_KEY");
  

  或指定版本和库：

  services.AddBlazorGoogleMaps(new GoogleMapsComponents.Map.MapApiLoadOptions("YOUR_KEY", Version = "beta", Libraries = "places,visualization,drawing,marker"));
  

通过以上步骤，开发者能够正确配置并启动基于 Blazor 的应用，使其具备显示和交互 Google Maps 功能的能力。记得替换 'YOUR_API_KEY' 为实际从 Google 获取的API密钥以保证正常运行。

BlazorGoogleMaps Blazor interop for GoogleMap library 项目地址: https://gitcode.com/gh_mirrors/bl/BlazorGoogleMaps