README

Statamic 3 的 Mapbox

主要功能

• 更改地图样式
• 更改地图纵横比
• 更改搜索结果区域
• 按类型过滤搜索结果
• 按位置过滤搜索结果
• 创建带有图例和颜色的标记
• 保存当前位置信息
• 1 个插件和 1 个即插即用模板的 3 个 Antlers 标签
• 可在全局和字段类型级别配置

安装

从您的控制面板的“工具 > 插件”部分安装 Mapbox，或通过 composer，在您的网站文件夹中运行

composer require jimblue/mapbox

Mapbox 访问令牌

要启用 Mapbox，您需要一个 Mapbox 访问令牌。如果您还没有，您可以在 Mapbox 上注册，这是免费的！

然后，您可以将您的 Mapbox 访问令牌添加到您的 .env 文件中

MAPBOX_ACCESS_TOKEN="your_mapbox_access_token"

配置

配置文件将在安装过程中自动发布。

在更新时，您需要手动更改配置文件

php artisan vendor:publish --tag="mapbox-config"

用法

添加 Mapbox 字段类型

要在您的内容中添加 Mapbox，您还需要在您的内容蓝图中将 Mapbox 字段类型添加到媒体类别中。您可以使用默认选项或根据需要调整 Mapbox 字段类型，每个选项在字段类型创建表单中都有文档说明。

使用 Mapbox 字段类型创建条目

如果您正确地遵循了前面的步骤，您应该在编辑/创建条目时看到 Mapbox 字段类型。您可以尝试搜索位置、更改地图样式、添加标记等。一旦您对地图满意，只需保存您的条目即可。

在您的网站上显示地图

显示地图的最简单方法是使用模板中的即插即用 mapbox 标签并从 CDN 加载 mapbox 库

{{ mapbox :config="my_mapbox_fieltype_name" }}
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>

对于更高级的使用，您可以使用 json 标签

{{ mapbox:json :config="my_mapbox_fieltype_name" }}

或标签对

{{ mapbox:parts :config="my_mapbox_fieltype_name" }}
<script>
 mapboxgl.accessToken = '{{ accessToken }}';

 var map = new mapboxgl.Map({
   container: 'map',
   style: '{{ style }}',
   center: {{ center | to_json }},
   zoom: {{ zoom }},
   minZoom: {{ minZoom }},
   maxZoom: {{ maxZoom }},
   bearing: {{ bearing }},
   pitch: {{ pitch }},
   marker: {{ marker | to_json }},
 });
</script>
{{ /mapbox:parts }}
{{ /if }}