DcatAdmin表单中自定义地图组件

流氓凡技术分享 2022-05-03 4.74 K 0

背景

众所周知，在Dcat Admin后台中是支持map地图的，而且不止一种百度、腾讯、Google都支持，但是有个缺点不支持搜索定位，也就是说只能拖动坐标点来选择，这在实际后台使用中局限太大。

自定义实现原理

以腾讯地图坐标拾取api为例，我们做一个HTML页面引入并编写一些样式，然后在Dcat Admin后台中使用 $form->html(view('map')) 方式引入这个完成的页面即可，当然还需要在对应的表单上写两个隐藏域用于接收地图打点的坐标值

腾讯地图Api文档：https://lbs.qq.com/javascript_v2/doc/marker.html

开始

本次所有代码，因为代码较多全部放在gitee上了，也就4个文件，都是按照对应目录建立好的，直接复制过去更好理解，代码地址：https://gitee.com/ripperTs/notes/tree/master/laravel/map

新建两个模板文件在views中，主要是写腾讯地图和js中子级与iframe父级的数据交互，

数据交互模板，也就是需要在$form->html()中引入的模板代码：

<iframe id="map" src="/admin/custom/map" width="100%" height="500" style="border:none"></iframe>
<script>
    /**
     * 设置坐标点
     */
    function setCoordinate(value) {
        var $coordinate = $('.field_map_points');
        $coordinate.val(value);
    }

    /**
     * 设置坐标区域
     * @param value
     */
    function setCoordinateArea(value) {
        var $coordinate = $('.field_map_area');
        $coordinate.val(value);
    }

    /**
     * 获取坐标
     */
    function getCoordinate() {
        var $coordinate = $('.field_map_points');
        var value = $coordinate.val();
        if (value == '') {
            var str = '42.094146111,121.849365';
            return str.split(',');
        }
        return value.split(',');
    }
</script>

这里需要注意的是 src地址，所以我们需要在后台路由处定义一个路由来指向这个地址

$router->get('custom/map', 'AbActivityController@customMap'); // 自定义地图视图

然后我们到这个方法中引入第二个模板，也就是腾讯地图的样式

public function customMap()
    {
        return view('map');
    }

接着开始复制map.blade.php模板内容到自己的views中即可，这个代码量比较多，就不展示了都放在gitee上了

以上所有准备工作都已完成，如果闲麻烦的可以直接去gitee上复制代码

引入自定义地图

引入其实很简单，需要注意的是因为数据交互需要写死两个隐藏域作为表单传值，不然即使显示了不是也没用么

$form->html(view('coordinate'), '区域选择'); // 加载自定义地图
$step->hidden('map_points', '坐标点'); // 隐藏域，用于接收坐标点（这里如果想数据回填可以，->value('49.121221,132.2321312')）
$step->hidden('map_area', '当前区域'); // 隐藏域，用于接收详细点位地址

最后的完成的样式：