{layout name="manager/layout" /}
<style>
.layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
</style>
<div class="layuimini-container location-operate-page">
<div class="layuimini-main">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">标题</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入标题" class="layui-input">
</div>
</div>
<!-- 地址 -->
<div class="layui-form-item">
<label class="layui-form-label required">地址</label>
<div class="layui-input-block">
<input type="hidden" id="input-province" name="province" value="{$item.province ?? 0}">
<input type="hidden" id="input-city" name="city" value="{$item.city ?? 0}">
<input type="hidden" id="input-county" name="county" value="{$item.county ?? 0}">
<input type="hidden" id="input-province-text" name="province_text" value="{$item.province_text ?? ''}">
<input type="hidden" id="input-city-text" name="city_text" value="{$item.city_text ?? ''}">
<input type="hidden" id="input-county-text" name="county_text" value="{$item.county_text ?? ''}">
<div id="target" style="z-index: 1111"></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">详细地址</label>
<div class="layui-input-block">
<input type="text" name="business_address" lay-verify="required" value="{$item.business_address??''}" placeholder="请输入" class="layui-input">
</div>
</div>
<!-- 经纬度 -->
<div class="layui-form-item">
<label class="layui-form-label required">经纬度</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input type="number" name="lng" value="{$item.lng ?? ''}" id="longitude" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="number" name="lat" value="{$item.lat ?? ''}" id="latitude" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline"><button class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" data-url="/manager/business-circle/add" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
</div>
<script src="__MANAGER__/js/business_circle.js?v={:mt_rand()}"></script>
<script src="__STATIC__/js/iPicker/iPicker.min.js"></script>
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
<script>
let province = $('#input-province').val();
let city = $('#input-city').val();
let county = $('#input-county').val();
let _width = 200;
let _height = 34;
province = province ? province : '110000';
city = city ? city : '110100';
county = county ? county : '110101';
if ($('#target').length > 0) {
if ($('#target').data('width') != undefined) {
_width = $('#target').data('width');
}
if ($('#target').data('height') != undefined) {
_height = $('#target').data('height');
}
}
var picker =iPicker.create("#target", {
width: _width,
height: _height,
data: {
// 此处以通过 jquery 库获取本地数据源为例
//source: Promise.resolve($.getJSON("/static/js/iPicker/area.json"))
// 此处以通过 jquery 库获取数据为例
// 示例代码中使用的 "http://www.abcddcba.com/api/area" 是模拟地址，实际应用中替换成真实地址即可
// code 参数值就是相应地区对应的行政区划代码
// ----------------------------------------------------------------------------------------------------------
// 使用自定义数据源时，必须保证 source 属性值是 Function 类型
// iPicker 会自动执行此函数，同时要确保此函数的执行结果返回的是标准的 Promise 对象
// iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Array 类型）
// ----------------------------------------------------------------------------------------------------------
// 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
// 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 code 为 null 时默认取零）
source: code => $.get( "/api/area/index.html?areaId=" + ( code || 86 ) )
},
onSelect: (code, name, all) => {
// 返回参数均为数组形式
// console.log( code );
// console.log( name );
// console.log( all );
let len = code.length;
if (len === 3) {
$('#input-province').val(code[0]);
$('#input-city').val(code[1]);
$('#input-county').val(code[2]);
$('#input-province-text').val(name[0]);
$('#input-city-text').val(name[1]);
$('#input-county-text').val(name[2]);
}
},
selected: [province, city, county],
})
</script>
<script>
layui.use(['layer','form','jquery','location'],function(){
let $ = layui.jquery;
let form = layui.form;
let location = layui.location;
let lng = $('#longitude').val();
let lat = $('#latitude').val();
lng = lng.length > 0 ? lng : '116.404';
lat = lat.length > 0 ? lat : '39.915';
let locationData = {lng: lng,lat: lat};
location.render("#locationBtn",{
type: 1,
apiType: "gaodeMap",
coordinate: "gaodeMap",
mapType: 0,
zoom: 15,
title: '区域定位',
init: function(){
// 打开地图时 延迟一定时间搜索
$('body').on('click', '#locationBtn', function () {
let address = $("input[name='address']").val();
setTimeout(function () {
$('#ew-map-select-input-search').val(address).trigger('input');
}, 1500)
})
return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
},
success: function (data) {
$("#longitude").val(data.lng);
$("#latitude").val(data.lat);
},
onClickTip: function (data) {
console.log(data);
}
});
});
</script>