README

该模块帮助在您的 Silverstripe 项目中创建和管理 Google Maps 🌏。它包含全面设置，您可以充分利用。无论您需要创建简单还是复杂的地图 🗺️、标记 📍 等等。

安装

1. 安装模块

composer require goldfinch/google-maps

2. 使用所需库创建 Google Cloud API 密钥

此模块需要启用两个 API 库 才能正常运行。

Maps JavaScript API 用于地图集成
Maps Static API 用于地图缩略图和预览

3. 将 Google Cloud API 密钥添加到您的 .env

APP_GOOGLE_MAPS_KEY=""

4. 实现 JavaScript 前端组件

通过 Silverstripe Requirements PHP

Requirements::javascript('goldfinch/google-maps:client/dist/map.js');

通过模板 require

<% require javascript('goldfinch/google-maps:client/dist/map.js') %>

通过 ES6 模块

npm i @googlemaps/js-api-loader

import GoogleMap from '..../vendor/goldfinch/google-maps/client/src/src/map-mod'

// import GoogleMap from '@goldfinch/google-maps/src/map-mod'; // with alias

document.addEventListener('DOMContentLoaded', () => {
  new GoogleMap()
})

// vite.config.js
// * only if you use alias import above

import { defineConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  return {
    // ..

    resolve: {
      alias: [{ find: '@goldfinch', replacement: fileURLToPath(new URL('./vendor/goldfinch', import.meta.url)) }]
    }

    // ..
  }
})

可用的 Taz 命令

如果您以前没有使用过 Taz🌪️，则必须在您的根项目文件夹中提供 taz 文件 cp vendor/goldfinch/taz/taz taz

创建地图片段

php taz make:map-segment

创建信息窗口模板

php taz make:map-infowindow:template

创建 MapBlock 扩展

php taz vendor:google-maps:ext:block

创建 Config 扩展

php taz vendor:google-maps:ext:config

创建 MapsAdmin 扩展

php taz vendor:google-maps:ext:admin

创建 MapSegment 扩展

php taz vendor:google-maps:ext:segment

创建完整的 Yaml 配置（需要进一步配置，您可能需要删除不需要的部分）

php taz vendor:google-maps:config

发布所有可用的模板

php taz vendor:google-maps:templates

运行所有可用的 vendor:google-maps:* 命令

php taz vendor:google-maps

如何创建新地图

每个 Google Map 都基于所谓的 地图片段 构建。

1. 创建地图片段

使用 Taz🌪️ 生成新的地图片段。它将快速引导您完成设置，并为您处理。

php taz make:map-segment

2. 在 CMS 中创建地图记录

转到 /admin/maps 并添加新地图。在类型中，我们需要选择之前创建的地图片段（应默认选中）。您可以继续添加标记并查看设置选项卡。

3. 自定义信息窗口模板（可选）

此模块为地图和标记提供各种设置。您还可以为标记添加信息窗口并轻松根据需求进行自定义。您只需使用 Taz 创建自定义信息窗口模板即可。

php taz make:map-infowindow:template

创建后，您可以在地图中添加的任何标记记录中转到并从 信息窗口模板 下拉菜单中选择您的自定义模板。

用法

跨模板

使用 GoogleMaps 全局提供者。

按类型渲染地图片段模板

$GoogleMaps.bySegment(office).RenderSegmentMap

仅按类型渲染地图框架

$GoogleMaps.bySegment(office).MapElement

按 ID 渲染地图片段模板

$GoogleMaps.byID(1).RenderSegmentMap

仅按 ID 渲染地图框架

$GoogleMaps.byID(1).MapElement

使用 elemental 块

如果您更喜欢使用 silverstripe/silverstripe-elemental，您可以查看此模块已附带 Map 块。

备注

Google Maps iframe 可能有一个您想要去除的蓝色边框。

.gm-style iframe + div {
  border: none !important;
}

截至 2024 年 2 月 21 日，标记已被弃用。请使用 AdvancedMarkerElement 代替。

事件

可用的 JavaScript 回调事件

window.goldfinch = {}

window.goldfinch.map_callback = (map, mapSettings, segment, parameters) => {
  // ..
}
window.goldfinch.marker_callback = (marker, markerParams, e, map, segment, parameters) => {
  // ..
}
window.goldfinch.infoWindow_callback = (infoWindow, infowindowParams, marker, map, e, segment, parameters) => {
  // ..
}

goldfinch / google-maps

维护者

详情