Yzncms系列教程(十):地图位置插件的使用
2023-06-13 09:11:39 时间
安装此插件后需要配置自定义字段方可显示
介绍
- 实现鼠标移动定位
- 集成3个地图api,百度,高德,天地图
- 实现地图api与坐标系混用,自动转换坐标
- 实现搜索定位
新建文件
在application/admin/view/custom/
目录下新建custom_address.html
文件
代码如下
{php}$address = parse_attr($vo['value']);{/php}
<div class="layui-form-item layui-form-text">
<label>{$vo.title} {if condition="isset($vo.ifrequire) AND $vo.ifrequire"} <font color="red">*</font>{/if}</label>
<div class="layui-form-field-label" style="position: relative;">
<!--默认是天安门的维度116.404|39.915-->
<div class="layui-input-inline">
<input id="longitude" name="{$vo.fieldArr}[{$vo.name}][longitude]" placeholder="请输入经度" class="layui-input map-location-input" lay-verType="tips" value="{$address[0]|default='116.404'}" />
</div>
<div class="layui-input-inline">
<input id="latitude" name="{$vo.fieldArr}[{$vo.name}][latitude]" placeholder="请输入纬度" class="layui-input" lay-verType="tips" value="{$address[1]|default='39.915'}" />
</div>
<div class="layui-input-inline">
<button id="locationBtn" type="button" class="layui-btn"><i class="layui-icon layui-icon-location map-location"></i>定位</button>
</div>
</div>
{if $vo.remark}<div class="layui-form-mid layui-word-aux">{$vo.remark|raw}</div>{/if}
</div>
<script>
layui.config({
version: '{$Think.config.version.yzncms_release}',
base: '__STATIC__/libs/layui_exts/'
}).extend({
locationX: '../../addons/address/locationX',
location: '../../addons/address/location',
}).use(['layer', 'form', 'jquery', 'location'], function() {
$ = layui.jquery;
var form = layui.form;
var location = layui.location;
location.render("#locationBtn", {
type: 1,
apiType: "baiduMap",
coordinate: "baiduMap",
mapType: 2,
zoom: 15,
title: '区域定位',
init: function() {
return { longitude: $("#longitude").val(), latitude: $("#latitude").val() };
},
success: function(data) {
$("#longitude").val(data.lng);
$("#latitude").val(data.lat);
}
});
});
</script>
自定义字段
选择刚才建的custom_address.html
文件
js参数
参数 | 说明 |
---|---|
type | 0 : 仅定位 1: 带有搜索的定位 |
title | 标题 |
zoom | 默认缩放级别 |
apiType | 地图api 可选参数 baiduMap, tiandiMap, gaodeMap |
coordinate | 坐标系 可选参数 baiduMap, tiandiMap, gaodeMap |
mapType | 地图类型 0 普通地图 1 卫星地图 2 混合地图 |
searchKey | 默认的检索关键字,type=1时生效 |
init | 初始化方法,初始化中心点位置 |
success | 回调方法,参数data是定位标记的经纬度信息 |
相关文章
- 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装,让你的Fiddler开挂到你怀疑人生
- 油猴Tampermonkey最强浏览器插件安装与使用教程
- 新发的日常小技巧——Sublime插件安装教程(例:lua开发环境插件安装)
- Alien Skin Exposure7安装激活教程 PSLR免费插件
- Atom装逼神器activate-power-mode插件安装教程「建议收藏」
- WeChatTweak for mac(微信多开和防撤回工具) V1.3.1最新版安装教程
- Maven 菜鸟教程 5 常用插件配置
- Alien Skin Exposure2023图片调色滤镜插件下载使用教程
- 【图文教程】云服务器上,Linux安装VSFTPD组件及遇到的问题
- ATAC-seq分析:教程简介(1)
- 徐大大seo:高级SEO插件Rank Math使用教程
- BBK扫码登录的安装和对接傻妞扫码登陆插件详细教程
- Oracle Apex系统变量大全--Oracle Apex社区教程www.sqlu.cn
- PyCharm2023-安装教程
- Redis缓存IO模型的演进教程示例精讲
- MongoDB入门:学习中文教程(mongodb中文教程)
- 《Docker教程》翻译邀请
- Linux系统解锁root教程:突破管理员权限限制,实现更多操作和自定义设置。(linux解锁root)
- 红色菜BRedis 入门指南(redis 菜B教程)
- 分享20多个很棒的jQuery文件上传插件或教程
- 精心挑选的15款优秀jQuery本特效插件和教程