添加地图

This commit is contained in:
WenG 2021-03-21 23:06:31 +08:00
parent 7a5585e29b
commit 0e97a424f0

View File

@ -28,17 +28,30 @@
<input type="text" id="enterpriseName" name="enterpriseName" class="layui-input" value="" placeholder="请输入名称" maxlength="255">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">经度</label>
<div class="layui-input-block">
<input type="text" id="enterpriseLng" name="enterpriseLng" class="layui-input" value="" placeholder="请输入经度" maxlength="255">
<div class="layui-form-item layui-row">
<div class="layui-col-md2">
<select id="pollType" name="pollType" lay-filter="pollType">
<option value="areaSearch" selected>地区搜索</option>
<option value="lngLatSearch">经纬度搜索</option>
</select>
</div>
<div id="areaBox" class="layui-col-md2">
<input type="text" id="area" class="layui-input" value="" placeholder="请输入地区" maxlength="255">
</div>
<div id="lngBox" class="layui-col-md2" style="display: none;">
<input type="number" id="lng" class="layui-input" value="" placeholder="请输入经度" maxlength="255">
</div>
<div id="latBox" class="layui-col-md2" style="display: none;">
<input type="number" id="lat" class="layui-input" value="" placeholder="请输入纬度" maxlength="255">
</div>
<div class="layui-col-md2">
<button type="button" id="searchBtn" class="layui-btn">搜索定位</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">纬度</label>
<div class="layui-input-block">
<input type="text" id="enterpriseLat" name="enterpriseLat" class="layui-input" value="" placeholder="请输入纬度" maxlength="255">
</div>
<div id="baiduMap" style="width: 100%; height: 400px;"></div>
<input type="hidden" id="enterpriseLng" name="enterpriseLng" maxlength="255">
<input type="hidden" id="enterpriseLat" name="enterpriseLat" maxlength="255">
</div>
<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
@ -52,10 +65,8 @@
</div>
</div>
</div>
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pFMM3KjMlPlpzEGTXwB5vdj6cDCfB6Py"></script>
<script>
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
@ -66,67 +77,27 @@
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var wangEditor = window.wangEditor;
var wangEditorObj = {};
var viewerObj = {};
var baiduMap = {
map: null,
local: null
}
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
function refreshDownloadTemplet(fileName, file) {
var dataRander = {};
dataRander[fileName] = file;
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
document.getElementById(fileName +'FileBox').innerHTML = html;
function initBaiduMap() {
baiduMap.map = new BMap.Map("baiduMap");
var point = new BMap.Point(116.404, 39.915);
baiduMap.map.centerAndZoom(point, 15);
baiduMap.local = new BMap.LocalSearch(baiduMap.map, {
renderOptions:{map: baiduMap.map}
});
}
// 初始化文件列表
function initFileList(fileName, ids, callback) {
var dataForm = {};
dataForm[fileName] = ids;
form.val('dataForm', dataForm);
if(!ids) {
refreshDownloadTemplet(fileName, []);
if(callback) {
callback(fileName, []);
}
return;
}
top.restAjax.get(top.restAjax.path('api/file/listfilebyfileid', []), {
ids: ids
}, null, function(code, data) {
refreshDownloadTemplet(fileName, data);
if(callback) {
callback(fileName, data);
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化视频
function initVideo(fileName, data) {
for(var i = 0, item; item = data[i++];) {
var player = new ckplayer({
container: '#'+ fileName + i,
variable: 'player',
flashplayer: false,
video: {
file: 'route/file/downloadfile/true/'+ item.fileId,
type: 'video/mp4'
}
});
}
}
// 初始化内容
function initData() {
initBaiduMap();
}
initData();
@ -166,6 +137,41 @@
// 校验
form.verify({
});
$('#searchBtn').click(function() {
var searchType = $('#pollType').val();
if(searchType === 'areaSearch') {
var area = $('#area').val();
if(!area) {
top.dialog.msg('请输入地名');
return;
}
baiduMap.local.search(area);
} else if(searchType === 'lngLatSearch') {
var lng = $('#lng').val();
var lat = $('#lat').val();
if(!lng || !lat) {
top.dialog.msg('请输入经纬度');
return;
}
var point = new BMap.Point(lng, lat);
baiduMap.map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
baiduMap.map.addOverlay(marker);
}
});
form.on('select(pollType)', function(data) {
if(data.value === 'areaSearch') {
$('#areaBox').show();
$('#lngBox').hide();
$('#latBox').hide();
} else if(data.value === 'lngLatSearch') {
$('#lngBox').show();
$('#latBox').show();
$('#areaBox').hide();
}
});
});
</script>
</body>