You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
4.7 KiB
115 lines
4.7 KiB
@extends("admin.layouts.layout")
|
|
|
|
@php
|
|
$pageTitle = __("actions.".last(explode("/",request()->url()))).$modelName;
|
|
@endphp
|
|
|
|
@section("content")
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{!! form_start($form) !!}
|
|
@foreach($form->getFields() as $field)
|
|
{!! form_row($form->{$field->getName()},isset($vo[$field->getName()]) ? ["value"=>$vo[$field->getName()],"selected"=>$vo[$field->getName()]] : []) !!}
|
|
@if($field->getName()=="address")
|
|
<div class="mapimg" id="mapimg-box" style="position: relative">
|
|
<img style="position: absolute;top: 43%;left: 53%;transform: translate(-50%, -50%);z-index: 1;"
|
|
src="https://3gimg.qq.com/lightmap/api_v2/2/4/117/theme/default/imgs/marker.png"
|
|
alt="">
|
|
<div id="mapcontainer" style="height:200px; width: 100%;"></div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
{!!form_end($form)!!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push("footer")
|
|
<script type="text/javascript"
|
|
src="https://map.qq.com/api/js?v=2.exp&key=D3HBZ-RAMHJ-KFHFR-KLK5H-OGWJ7-RNB63"></script>
|
|
<script>
|
|
function uploaderCallback(file, data, index) {
|
|
$('input[data-uploader-index=' + index + ']').val("/storage/" + (data.folder ? data.folder + "/" : "") + data.name);
|
|
return true;
|
|
}
|
|
|
|
$(function () {
|
|
if ($("#address").length) {
|
|
var mapimgBox = $("#mapimg-box");
|
|
$("#address").before(mapimgBox.clone());
|
|
mapimgBox.remove();
|
|
initMap();
|
|
$("#mapcontainer").bind("DOMNodeInserted", function (e) {
|
|
var tempCount = 0;
|
|
$("#mapcontainer .smnoprint").siblings().each(function () {
|
|
tempCount++;
|
|
if (tempCount == 2 || tempCount == 3) {
|
|
$(this).remove();
|
|
}
|
|
});
|
|
});
|
|
$("#address").blur(codeAddress);
|
|
}
|
|
});
|
|
var citylocation, map, geocoder = null;
|
|
var initMap = function () {
|
|
var latitude = $("input[name=latitude]").val();
|
|
var longitude = $("input[name=longitude]").val();
|
|
|
|
map = new qq.maps.Map(document.getElementById('mapcontainer'), {
|
|
// center: center,
|
|
zoom: 16,
|
|
});
|
|
if (latitude != "" && longitude != "") {
|
|
var center = new qq.maps.LatLng(latitude, longitude);
|
|
} else {
|
|
var center = new qq.maps.LatLng(31.835727, 119.905098);
|
|
}
|
|
map.panTo(center);
|
|
|
|
qq.maps.event.addListener(map, 'dragend', function () {
|
|
//地图移动停止后 获取经纬度
|
|
$('#latitude').val(map.getCenter().lat);
|
|
$('#longitude').val(map.getCenter().lng);
|
|
var coord = new qq.maps.LatLng(map.getCenter().lat, map.getCenter().lng);
|
|
geocoder.getAddress(coord);
|
|
});
|
|
//获取城市列表接口设置中心点
|
|
citylocation = new qq.maps.CityService({
|
|
complete: function (result) {
|
|
map.setCenter(result.detail.latLng);
|
|
}
|
|
});
|
|
//调用地址解析类
|
|
geocoder = new qq.maps.Geocoder({
|
|
complete: function (result) {
|
|
map.setCenter(result.detail.location);
|
|
//请求成功后 给经纬度赋值
|
|
$('#address').val(result.detail.address);
|
|
$('input[name=latitude]').val(result.detail.location.lat);
|
|
$('input[name=longitude]').val(result.detail.location.lng);
|
|
}
|
|
});
|
|
//调用searchLocalCity();方法 根据用户IP查询城市信息。
|
|
if (latitude == "" && longitude == "") {
|
|
citylocation.searchLocalCity();
|
|
}
|
|
};
|
|
|
|
function codeAddress() {
|
|
var address = $("#address").val();
|
|
//通过getLocation();方法获取位置信息值
|
|
if (address != "") {
|
|
geocoder.getLocation(address);
|
|
} else {
|
|
$.NotificationApp.send("提示", "请输入地址以查询坐标！", 'top-center', '#ffbc00', 'warning');
|
|
}
|
|
|
|
}
|
|
</script>
|
|
@endpush
|