Tp-admin开发框架是一套基于Thinkphp5开发的后台开发框架。通过这套系统构建的项目大大小小差不多有3~4百个,其安全性、稳定性、兼容性基本上都得到了验证和提升。
今天波波分享的是这套框架的新组件-地图选择器。地图选择器所使用的最大场景应该就是多门店、多商家的平台。我们可以通过地图选择器很方便的为商家录入地址信息及精确的经纬度。为用户提供精准导航服务。
下面我们看下示例:
地图选择器内置的是高德地图,用户可以通过拖动定位标记选择商家位置,也可以通过搜索定位,还可以搜索后再拖动选择更加精准的位置。本组件已经被集成到了最新的Tp-admin框架之内,用户可以通过“git clone https://gitee.com/zkii_admin/Tp-admin.git”来拉取最新的代码。
如果是老用户或者是ThinkAdmin的用户可以通过QQ群来下载该组件进行手动安装。
安装方法:
1、将admin和demo文件夹中的文件覆盖ThinkAdmin对应文件。
2、修改/static/admin/listen.js,增加data-map事件监听。
- /* !注册data-map 事件行为 */
- this.$body.on('click','[data-map]',function(){
- var lat = $("#lat").val();
- var lon = $("#lon").val();
- var address = $("#address").val();
- var url = window.ROOT_URL + '?s=admin/plugs/mapselector';
- url += (lat && lon && location) ? '?lat=' + lat + '&lon=' + lon + '&location=' + address : '';
- $.form.iframe(url, '位置选择');
- })
3、进入后台在插件案例中增加一个地图选择的菜单。菜单链接:“/demo/plugs/mapselector”。
4、大功告成!
附:组件源码(提取码:umbq)