README

此插件为 Contao 添加了 Google 地图集成。它基于 ivory/google-map。

功能

• 引入了一个简单的 Contao 后端实体来配置您的 Google 地图和覆盖层（标记、信息窗口等）
• 前端模块和内容元素
• 插入标记和 Twig 函数
• 为 delahaye/dlh_googlemaps 提供了一个简单的基于 Contao 命令的迁移工具（感谢 delahaye！）
• 响应式支持（移动优先），提供响应式配置，当达到值（大于断点）时更新地图
• 支持 List bundle 和 Reader bundle
• 支持 hofff/contao-consent-bridge

设置和使用

设置

1. 使用 Contao 管理器或 Composer 进行安装，之后更新数据库

   composer require heimrichhannot/contao-google-maps-bundle
   

2. 可选：如果您已经使用 delahaye/dlh_googlemaps 创建了 Google 地图，请参阅“从 dlh_googlemaps 迁移”部分。

3. 设置您的 Google API 密钥（能够使用 Google Maps 和 Google 静态地图），如果尚未在以下位置之一完成（按优先级升序）

   • 全局 Contao 设置（tl_settings）
   • 页面根目录（tl_page）
   • Google 地图配置（tl_google_map）

使用

1. 使用 Contao 左侧的相应菜单项创建 Google 地图。
2. 可选：使用创建的 Google 地图配置创建标记（标记是地图的子实体）
3. 现在您可以使用以下内置方式之一将地图集成到您的网站中
   • 内容元素
   • 模块
   • 插入标记（见下文）
   • Twig 函数（见下文）
   • 将列表渲染为地图，列表配置元素或阅读器配置元素

列表和阅读器插件

对于列表和阅读器插件，都提供了一个配置元素以向项目添加地图。

对于列表，您还可以选择将整个列表渲染为地图。在您的列表配置中，检查 renderItemsAsMap 选项并进行附加配置。您可以使用或修改捆绑的默认模板：list_google_maps_default.html.twig 和 list_item_google_maps_default.html.twig。

通常，您的列表项没有添加和填写正确的字段，不能用作地图上的标记。因此，您需要实现一个 GoogleMapsPrepareExternalItemEvent 事件监听器，并创建或更新一个可以在地图上显示的覆盖对象。

class GoogleMapsSubscriber implements EventSubscriberInterface {

    public static function getSubscribedEvents() {
        return [GoogleMapsPrepareExternalItemEvent::class => 'onGoogleMapsPrepareExternalItemEvent',];
    }

    public function onGoogleMapsPrepareExternalItemEvent(GoogleMapsPrepareExternalItemEvent $event): void
    {
        if (!$event->getConfigModel() instanceof ListConfigModel) {
            return;
        }
        
        $item = (object)$event->getItemData();
        
        $overlay = new OverlayModel();
        $overlay->title = $item->headline;
        $overlay->type = Overlay::TYPE_MARKER;
        if ($item->coordX && $item->coordX) {
            $overlay->positioningMode = Overlay::POSITIONING_MODE_COORDINATE;
            $overlay->positioningLat = trim($item->coordX);
            $overlay->positioningLng = trim($item->coordX);
        } elseif (!empty($item->address)) {
            $overlay->positioningMode = Overlay::POSITIONING_MODE_STATIC_ADDRESS;
            $overlay->positioningAddress = $item->address;
        } else {
            $event->setOverlayModel(null);
            return;
        }
        $overlay->markerType = Overlay::MARKER_TYPE_SIMPLE;
        $overlay->clickEvent = Overlay::CLICK_EVENT_INFO_WINDOW;
        $overlay->infoWindowText = '<p><b>'.$item->headline.'</b></p>';
        $overlay->published='1';
        $event->setOverlayModel($overlay);
    }
}

从 dlh_googlemaps 迁移

虽然我们不能保证完全迁移您现有的 dlh_googlemaps 实例，但您仍然有一个起点。把它看作是 95% 的迁移吧；-)

迁移操作非常简单，只需在 Contao 根目录下运行 vendor/bin/contao-console huh:google-maps:migrate-dlh 命令即可。此过程不会修改您的 dlh Google 地图，仅会根据现有旧数据在 tl_google_map 和 tl_google_map_overlay 中创建新的实例。

插入标签

Twig 函数

待办事项

• 覆盖类型
  • 折线
  • 圆
  • 矩形
  • 地面覆盖物

文档

开发者文档