README

本包为您的 Filament 应用程序提供了一种 简单 且用户友好的地图显示动作组件。它使用 iframe 渲染地图，确保无缝集成。请确保您有一个 Google Maps API 密钥来使用此包。

安装

您可以通过 composer 安装此包

composer require codewithdennis/filament-simple-map

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-simple-map-config"

这是已发布配置文件的内容

return [
    'google_maps_embed_api_key' => env('GOOGLE_MAPS_EMBED_API_KEY'),
];

用法

本包支持以下 Google Maps 模式：place、view、streetview、search 和 directions。默认模式是 place。您可以使用它进行表格操作、信息列表、表单和常规操作。请确保您导入了正确的组件。

地点

默认 地点 模式下可用的方法。

定义地图标记位置。

->address('City Hall, New York, NY')

定义地图视图的中心。

->center('37.4218,-122.0840')

设置地图的初始缩放级别。

->zoom(10) // 0 to 21

将地图设置为卫星视图。（默认：路线图）

->satellite()

定义用于 UI 元素以及地图瓦片标签显示的语言。

->language('en')

根据地缘政治敏感性定义要显示的适当边框和标签。

->region('en')

以下是使用 地点 模式的示例。

Forms\Components\TextInput::make('address')
    ->required()
    ->maxLength(255)
    ->suffixAction(
        SimpleMap::make('showMap')
            ->icon('heroicon-o-map')
            ->address('City Hall, New York, NY')
            ->center('37.4218,-122.0840')
            ->zoom(10)
            ->satellite()
            ->language('en')
            ->region('US'),
    ),

视图

要使用 视图 模式，您需要调用 viewing 方法。

将地图设置为视图模式。

->viewing()

定义地图视图的中心。

->center('-33.8569,151.2152')

设置地图的初始缩放级别。

->zoom(10) // 0 to 21

将地图设置为卫星视图。（默认：路线图）

->satellite()

以下是使用 view 模式的示例。

Forms\Components\TextInput::make('address')
    ->required()
    ->maxLength(255)
    ->suffixAction(
        SimpleMap::make('showMap')
            ->viewing()
            ->center('-33.8569,151.2152')
            ->zoom(10)
            ->satellite()
    ),

路线

要使用 路线 模式，您需要调用 directions 方法。

定义计算路线的起点。

->origin('Amsterdam, Netherlands')

定义计算路线的终点。

->destination('Rotterdam, Netherlands')

指定一个或多个中间地点，用于在起点和终点之间路由路线。

->waypoints([
    'Utrecht, Netherlands',
    'Den Haag, Netherlands'
])

指定在路线中要避免的功能。请注意，这并不排除包含限制功能（组）的路线；它倾向于更有利的路线。

->avoid([
    'tolls',
    'highways',
    'ferries'
])

将交通模式设置为飞行。

->flying()

将交通模式设置为步行。

->walking()

将交通模式设置为骑行。

->bicycling()

将交通模式设置为公共交通。

->transit()

将交通模式设置为驾驶。

->driving()

将单位系统设置为英制。（默认：公制）

->imperial()

定义地图视图的中心。

->center('52.3676,4.9041')

将地图设置为卫星视图。（默认：路线图）

->satellite()

定义用于 UI 元素以及地图瓦片标签显示的语言。

->language('nl')

根据地缘政治敏感性定义要显示的适当边框和标签。

->region('nl')

以下是使用 路线 模式的示例。

Forms\Components\TextInput::make('address')
    ->required()
    ->maxLength(255)
    ->suffixAction(
        SimpleMap::make('showMap')
            ->directions()
            ->origin('Amsterdam, Netherlands')
            ->destination('Rotterdam, Netherlands')
            ->walking()
            ->imperial()
            ->satellite()
            ->language('nl')
    ),

街景

要使用 街景 模式，您需要调用 streetview 方法。

定义要显示街景的位置。

->location('52.3676,4.9041')

指示相机从北开始顺时针的罗盘方向（度数）。

->heading(0) // -180 to 360

指定相机的向上或向下角度。

->pitch(0) // -90 to 90

确定图像的水平视野。

->fov(100) // 10 to 100

定义地图视图的中心。

->center('52.3676,4.9041')

设置地图的初始缩放级别。

->zoom(10) // 0 to 21

定义用于 UI 元素以及地图瓦片标签显示的语言。

->language('nl')

根据地缘政治敏感性定义要显示的适当边框和标签。

->region('nl')

搜索

要使用 搜索 模式，您需要调用 search 方法。

定义搜索词。

->query('restaurants near Amsterdam, Netherlands')

定义地图视图的中心。

->center('52.3676,4.9041')

设置地图的初始缩放级别。

->zoom(10) // 0 to 21

将地图设置为卫星视图。（默认：路线图）

->satellite()

定义用于 UI 元素以及地图瓦片标签显示的语言。

->language('nl')

根据地缘政治敏感性定义要显示的适当边框和标签。

->region('nl')

以下是使用 搜索 模式的示例。

Forms\Components\TextInput::make('address')
    ->required()
    ->maxLength(255)
    ->suffixAction(
       SimpleMap::make()
            ->search()
            ->query('restaurants near Amsterdam, Netherlands')
            ->center('52.3676,4.9041')
            ->zoom(10)
    ),

贡献

请参阅 CONTRIBUTING 了解详细信息。

鸣谢

• CodeWithDennis
• 所有贡献者

许可

麻省理工学院许可证（MIT）。请参阅许可文件获取更多信息。