README

需求

• PHP >= 7.3
• Composer

安装

Bedrock

通过 Composer 安装

$ composer require androlax2/acf-image-map

手动

下载发行版 .zip 并将其安装到 wp-content/plugins 中。

用法

首先您需要定义一个图像，您将在其上添加不同的形状。

形状

您可以使用不同的形状，目前您可以使用 多边形 和 点。在前端

• 它将返回一个包含您的坐标的数组，在 area_coords 中为 多边形，
• 它将返回一个包含点坐标的数组，在 x 和 y 中为 点。

ACF 编译器

如果您正在使用 ACF Builder

点

$field
  ->addImage('my_image')
  ->addField('my_point_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'point',
    'percentage' => true,
  ]);

多边形

$field
  ->addImage('my_image')
  ->addField('my_poly_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'poly',
  ]);

HTML

点

对于点，您有 x 和 y 坐标。

让我们假设我们定义了上述字段

$field
  ->addImage('my_image')
  ->addField('my_point_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'point',
    'percentage' => true,
  ]);

因此，我们将有一个类似于下面的 HTML 结构来在图像上显示我们的点

$image = get_field('my_image');
$point = get_field('my_point_coords');
  
<div style="position: relative;">
  <img src="<?php echo $image['url']; ?>">
  <span style="
    position: absolute; 
    top: <?php echo $point['y']; ?>; 
    left: <?php echo $point['x']; ?>"
   ></span>
</div>

多边形

您使用多边形在图像上创建地图，所以这里是实现此目的的 HTML 代码

让我们假设我们定义了上述字段

$field
  ->addImage('my_image')
  ->addField('my_poly_coords', 'image_map', [
    'image_field_label' => 'my_image',
    'shape' => 'poly',
  ]);

因此，我们将有一个类似于下面的 HTML 结构来在图像上显示我们的区域

$image = get_field('my_image');
$poly = get_field('my_point_coords');
  
<div style="position: relative;">
  <img src="<?php echo $image['url']; ?>" usemap="#map">
  <map name="map">
    <area coords="<?php echo $poly['area_coord']; ?>" shape="poly"></area>
  </map>
</div>

请注意，区域的坐标是以图像的最大尺寸定义的。在响应式设计中，这不会起作用，您必须重新计算坐标。

要自动且轻松地完成此操作，我推荐使用 此包

错误报告

如果您在 ACF Image Map 中发现错误，请 打开一个问题。

贡献

鼓励并通过 PR、报告问题或提出建议来贡献。这受到赞赏。

许可

ACF Image Map 在 MIT 许可证 下提供。