* 斯特拉皮谷歌地图
一个 Strapi 插件允许您将 Google 映射自定义字段应用到您的内容类型中, 用于选择和检索位置 .
使用量
执行这个google-maps自定义字段的 Strapi 内容类型的 API 响应可以如下:
{
"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中选择.
带有扩展属性的示例 :
{
"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 密钥) .
所需经费
- 斯特拉皮 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 项目的根部.
npm i @amicaldo/strapi-google-maps
# IMPORTANT: For Strapi versions before 5 install an older version instead:
npm i @amicaldo/[email protected]
# IMPORTANT: For Strapi versions before 4.11.0 install an older version instead:
npm i @amicaldo/[email protected]
要让Google Maps工作,请查看下一节.
在重新启动您的 Strapi 应用程序后, Google Maps 应该列为您的插件之一 .
QQ Strapi 配置( 需要)
允许所有 Google 地图资产通过自定义正确加载 皮带: 安全 内部中间软件 ./config/middlewares.js。 。 。 .
代替:
export default [
// ...
'strapi::security',
// ...
];
写入 :
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 插件文件夹并复制此寄存器 . 然后导航到此插件的目录 .
cd ./src/plugins
git clone https://github.com/amicaldo/strapi-google-maps.git
cd ./strapi-google-maps
使用 npm 安装依赖并编译服务器侧部分 .
npm install
npm run build
从您的工程根目录中启用内置插件 ./config/plugins.js。 。 。 .
module.exports = {
// ...
'google-maps': {
enabled: true,
resolve: './src/plugins/strapi-google-maps',
},
// ...
};
要让Google地图发挥作用,请查看上一节.
最后,重新编译您的 Strapi 项目的管理员面板.
npm run build
鸣谢
- @ roodekk (英语)
- @maektwain (英语)
- @prinzjuliano (英语)
- @roes (英语)
- @candidosales (英语)