# @amicaldo/strapi-google-maps 中文文档 规范地址：https://npmcn.com/package/%40amicaldo/strapi-google-maps/ 版本：3\.0\.2 npm 元数据更新时间：2026-01-13T09:23:20.348Z 中文译文更新时间：2026-11-06T10:22:51.093Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40amicaldo/strapi-google-maps 原文对照：https://npmcn.com/package/%40amicaldo/strapi-google-maps/?lang=original 项目主页：https://github.com/amicaldo/strapi-google-maps 源码仓库：https://github.com/amicaldo/strapi-google-maps ## 关键信息（来自 npm 元数据） - 包体积（解压后）：90.6 kB，44 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=18\.0\.0 \<=22\.x\.x - 运行依赖：8 个 - peer 依赖：@strapi/sdk-plugin ^5\.3\.2，@strapi/strapi ^5\.12\.5，react ^18\.3\.1，react-dom ^18\.3\.1，react-router-dom ^6\.30\.3，styled-components ^6\.1\.17 - 首次发布：2023-05-24T13:18:15.902Z - 最新版本发布：2026-01-13T09:23:20.084Z - 近 30 天下载量：3500（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：18（近 12 个月 1 个） ## 中文简介 用于 Strapi 的 Google 地图自定义字段,允许您选择一个位置 . ## 安装 ```sh npm install @amicaldo/strapi-google-maps ``` 也可以使用：`pnpm add @amicaldo/strapi-google-maps`、`yarn add @amicaldo/strapi-google-maps`、`bun add @amicaldo/strapi-google-maps` ## README # \* 斯特拉皮谷歌地图 ![Preview](https://github.com/amicaldo/strapi-google-maps/blob/main/pictures/preview.png?raw=true) 一个 Strapi 插件允许您将 Google 映射自定义字段应用到您的内容类型中, 用于选择和检索位置 . ## 使用量 执行这个google-maps自定义字段的 Strapi 内容类型的 API 响应可以如下: ```json { "data": [ { "id": 1, "documentId": "tub3d05itueb9vw1bux9f66a", "location": { "address": "Königswall 21, 44137 Dortmund, Germany", "coordinates": { "lat": 51.5164315, "lng": 7.455616999999997 }, "geohash": "u1jm1dm0bqyu" }, "createdAt": "2025-05-06T11:45:32.505Z", "updatedAt": "2025-05-06T11:53:48.099Z", "publishedAt": "2025-05-06T11:53:48.102Z" } ], "meta": { "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 1 } } } ``` 可用时, 保存 `location` 还包括解析的地址组件和基本位置元数据. 这个 `address` 直接来源于Google Places API(格式化地址),您从自动完成中选择,或者点击地图时从Google Geocoding API中选择. 带有扩展属性的示例 : ```json { "data": [ { "id": 1, "documentId": "tub3d05itueb9vw1bux9f66a", "location": { "address": "Königswall 21, 44137 Dortmund, Germany", "coordinates": { "lat": 51.5164315, "lng": 7.455617 }, "geohash": "u1jm1dm0bqyu", "components": { "streetNumber": "21", "route": "Königswall", "postalCode": "44137", "city": "Dortmund", "state": "NW", "country": "Germany" }, "place": { "id": "ChIJ2aVjP5V2uEcRxu2iWZhbU3w", "name": "Some Business Name", "types": ["point_of_interest", "establishment"] } }, "createdAt": "2025-05-06T11:45:32.505Z", "updatedAt": "2025-05-06T11:53:48.099Z", "publishedAt": "2025-05-06T11:53:48.102Z" } ], "meta": { "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 1 } } } ``` 字段 : - **地点。地址**: 将格式化的地址(自动完成)或地理编码格式化的地址(点击地图)放在位置上. - **位置。组件**数字 : - **街道数量** - **路径** (全街道名称使用 `long_name`(中文(简体) ) - **邮政编码** - **城市** - **状态** (提供简短表格,例如“NRW”) - **国家** (全称) - **地点. 地点**数字 : - **编号**: 地点 `place_id`编号 :`id` - **名称**: 商业显示名称(如果适用) - **类型**: 位置类型矩阵 您可以在您的 Strapi 仪表板的设置标签中配置此插件( 例如输入您的 API 密钥) . ![Configuration](https://github.com/amicaldo/strapi-google-maps/blob/main/pictures/configuration.png?raw=true) ## 所需经费 - 斯特拉皮 v5 - 要不加限制地使用插件,您应当考虑为Google地图平台获取API密钥,并添加Places API的访问权限. ## 迁移到v3 在升级到v3后,在测试斯特拉皮管理器的Google Maps字段时,要仔细地观看浏览器控制台的Google Maps平台出错. 这些消息通常表示缺失的API密钥权限或限制性密钥设置(例如缺失的Places或Geocoding API,错误的HTTP指针限制). 错误包括在Google Cloud Console中解决该问题的链接/指示. 跟踪他们: - 启用所需的 API( Maps JavaScript API, Places API, Geocoding API) - 调整关键限制( HTTP 推荐人、 IP/ 应用限制) - 必要时重新生成/更新密钥 一旦权限被纠正,就重新装入管理员并重新测试字段. ## \* 安装 你只需要安装 `strapi-google-maps` 通过 npm 软件包,在您 pardi 项目的根部. ```bash npm i @amicaldo/strapi-google-maps # IMPORTANT: For Strapi versions before 5 install an older version instead: npm i @amicaldo/strapi-google-maps@1.1.5 # IMPORTANT: For Strapi versions before 4.11.0 install an older version instead: npm i @amicaldo/strapi-google-maps@1.0.4 ``` **要让Google Maps工作,请查看下一节.** 在重新启动您的 Strapi 应用程序后, Google Maps 应该列为您的插件之一 . ## QQ Strapi 配置( 需要) 允许所有 Google 地图资产通过自定义正确加载 **皮带: 安全** 内部中间软件 `./config/middlewares.js`。 。 。 . 代替: ```js export default [ // ... 'strapi::security', // ... ]; ``` 写入 : ```js export default [ // ... { name: 'strapi::security', config: { contentSecurityPolicy: { useDefaults: true, directives: { 'connect-src': ["'self'", 'https:'], 'script-src': ["'self'", 'unsafe-inline', 'https://maps.googleapis.com'], 'media-src': [ "'self'", 'blob:', 'data:', 'https://maps.gstatic.com', 'https://maps.googleapis.com', ], 'img-src': [ "'self'", 'blob:', 'data:', 'https://maps.gstatic.com', 'https://maps.googleapis.com', 'khmdb0.google.com', 'khmdb0.googleapis.com', 'khmdb1.google.com', 'khmdb1.googleapis.com', 'khm.google.com', 'khm.googleapis.com', 'khm0.google.com', 'khm0.googleapis.com', 'khm1.google.com', 'khm1.googleapis.com', 'khms0.google.com', 'khms0.googleapis.com', 'khms1.google.com', 'khms1.googleapis.com', 'khms2.google.com', 'khms2.googleapis.com', 'khms3.google.com', 'khms3.googleapis.com', 'streetviewpixels-pa.googleapis.com', 'market-assets.strapi.io', ], }, }, }, }, // ... ]; ``` ## 特征 - 默认纬度和经度; - Google Maps API 密钥可以在环境变量中设置(`GOOGLE_MAPS_API_KEY`(三); ## 手工安装(不建议) 导航到您的 Strapi 插件文件夹并复制此寄存器 . 然后导航到此插件的目录 . ```bash cd ./src/plugins git clone https://github.com/amicaldo/strapi-google-maps.git cd ./strapi-google-maps ``` 使用 npm 安装依赖并编译服务器侧部分 . ```bash npm install npm run build ``` 从您的工程根目录中启用内置插件 `./config/plugins.js`。 。 。 . ```js module.exports = { // ... 'google-maps': { enabled: true, resolve: './src/plugins/strapi-google-maps', }, // ... }; ``` **要让Google地图发挥作用,请查看上一节.** 最后,重新编译您的 Strapi 项目的管理员面板. ```bash npm run build ``` ## 鸣谢 - @ roodekk (英语) - @maektwain (英语) - @prinzjuliano (英语) - @roes (英语) - @candidosales (英语) ## 常见问题 ### @amicaldo/strapi-google-maps 是什么？ 用于 Strapi 的 Google 地图自定义字段,允许您选择一个位置 \. ### 如何安装 @amicaldo/strapi-google-maps？ 在项目目录运行 npm install @amicaldo/strapi-google-maps，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@strapi/sdk-plugin（^5\.3\.2）、@strapi/strapi（^5\.12\.5）、react（^18\.3\.1）、react-dom（^18\.3\.1）、react-router-dom（^6\.30\.3）、styled-components（^6\.1\.17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @amicaldo/strapi-google-maps 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @amicaldo/strapi-google-maps 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @amicaldo/strapi-google-maps 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0 \<=22\.x\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @amicaldo/strapi-google-maps 可以商用吗？ @amicaldo/strapi-google-maps 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @amicaldo/strapi-google-maps 的下载量有多少？ 根据 npm 官方下载统计，@amicaldo/strapi-google-maps 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,500 次，日均约 117 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @amicaldo/strapi-google-maps 还在维护吗？ 最新版本 3\.0\.2 发布于 2026/01/13（9 个月前）；至今共发布 18 个版本，其中过去 12 个月发布了 1 个；首次发布于 2023/05/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。