README

注意：此插件仍在开发中

为CMB2添加图像地图字段，这允许在每个字段上设置标记，这些字段位于预定义的图像或地图层之上。

需要将CMB2单独添加到WordPress中。

每个字段可以包含一个标记，并存储该标记的坐标。点击地图上的任何位置都会在那里放置或移动标记。

如何安装

选项一

• 下载最新版本（从发布 > 资产中的CMB2-image-map.zip）并将其作为标准WordPress插件安装

选项二

• 将dutchigor/cmb2-image-map添加到composer中所需的包，并在您的代码中要求CMB2-image-map.php

如何使用

创建字段

创建一个类型为'image_map'的字段，并给它以下属性

• base_layer: 字符串 / 整数 - 如果base_type是'map'，则使用您希望使用的基图的URL模板。如果base_type是'image'，则使用作为图像层的附件ID。（必需）
• base_type: 字符串 - 使用图像覆盖层或使用地理基图。默认为'map'。（可选）
• base_lat: 整数 - 如果尚未设置标记，则将地图中心对准的纬度。（可选）
• base_lng: 整数 - 如果尚未设置标记，则将地图中心对准的经度。（可选）
• base_zoom: 整数 - 地图初始化在字段中的缩放级别。如果没有提供，则将显示整个图像并为中心对齐图像覆盖层。（可选）
• map_options: 数组 - 此数组将被转换为JavaScript对象并用于加载地图。有关可能的值，请参阅https://leaflet.npmjs.net.cn/reference-1.6.0.html#map-option。（可选）
• layer_options: 数组 - 此数组将被转换为JavaScript对象并用于加载基图。仅适用于base_type 'map'。有关可能的值，请参阅https://leaflet.npmjs.net.cn/reference-1.6.0.html#tilelayer。（可选）

示例

这是使用mapbox的地图字段示例

$cmb = new_cmb2_box( array(
    'id'            => 'image_map_metabox',
    'title'         => 'Example',
    'object_types'  => array( 'post' ),
 ) );

$cmb->add_field( array(
    'id'            => 'my_img_map',
    'name'          => 'Test Image Map',
    'type'          => 'image_map',
    'base_type'     => 'map',
    'base_layer'    => 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}'
    'base_lat'      => 60.1699,
    'base_lng'      => 24.9384,
    'layer_options' => array( 
        'accessToken'   => 'your-token-here',
        'id'            => 'mapbox/streets-v11',
        'tileSize'      => 512,
        'zoomOffset'    => -1,
    ),
    'map_options'   => array(
        'maxZoom'       => 18,
    )
) );

显示结果

结果存储在自定义字段中，为具有lat和lng值的数组。它们可以使用例如Flexible Map插件在前端地图上显示。

示例

$coordinates = get_post_meta( $post->ID, 'my_img_map', true )
flexmap_show_map([
  'center' => $coordinates['lat'] . ',' . $coordinates['lng']
]);