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.
201 lines
7.9 KiB
201 lines
7.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
|
|
<link rel="stylesheet" href="../../css/public.css" media="all" />
|
|
<script src="../../js/jquery-2.1.3.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2paoC2awfjGOwSQhtn4IjrqBM9S2RolC"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
|
|
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
|
|
<!--加载鼠标绘制工具-->
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
|
|
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
|
|
</head>
|
|
<body class="childrenBody">
|
|
<div class="layui-row" >
|
|
<div class=" layui-col-xs6 layui-col-sm6 layui-col-md4">
|
|
<form class="layui-form" style="width:90%;">
|
|
|
|
<input class="layui-input ID" type="hidden" /> <input class="layui-input Action" type="hidden" />
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">设备编号</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devcode" lay-verify="required" placeholder="请输入设备编号" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">设备名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devname" lay-verify="required" placeholder="请输入设备名称" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">设备类型</label>
|
|
<div class="layui-input-block">
|
|
<select id="devtype" lay-filter="aihao">
|
|
<option value="电气火灾探测器">电气火灾探测器</option>
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">生产厂家</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devfactory" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">坐标</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devloc" /><button class="btn button_btn" type="button" onclick="OpenOverlay()"> 定位</button>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">地点</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devaddr" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">安装时间</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devtime" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">安装单位</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devcpy" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">联系人</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devlxr" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">联系电话</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devtel" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">所属行业</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devhy" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-row layui-col-xs12">
|
|
<label class="layui-form-label">分组</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input devfolder" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-center">
|
|
<a class="layui-btn layui-btn-normal add_btn" lay-filter="AddEdit" lay-submit>提交</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class=" layui-col-xs6 layui-col-sm6 layui-col-md8" >
|
|
城市：<input id="cityName" ></input><input type="button" value="查询" onclick="theLocation()" />
|
|
<div id="l-map" class="map_style" style=" width:100%; height:100%; margin:0 auto; min-width:300px; min-height:600px;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../layui/layui.js"></script>
|
|
|
|
<script type="text/javascript" src="DeviceAddEdit.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
<script>
|
|
//创建和初始化地图函数：
|
|
function initMap() {
|
|
createMap(); //创建地图
|
|
setMapEvent(); //设置地图事件
|
|
addMapControl(); //向地图添加控件
|
|
|
|
}
|
|
function createMap() {
|
|
map = new BMap.Map("l-map");
|
|
// var point = new BMap.Point(117.126399, 36.656554); // 创建点坐标
|
|
// map.setCurrentCity("济南");
|
|
// map.centerAndZoom(point, 12);
|
|
map.centerAndZoom("济南市", 15);
|
|
}
|
|
function setMapEvent() {
|
|
map.enableScrollWheelZoom();
|
|
map.enableKeyboard();
|
|
map.enableDragging();
|
|
map.enableDoubleClickZoom()
|
|
}
|
|
//向地图添加控件
|
|
function addMapControl() {
|
|
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
|
|
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
|
|
map.addControl(scaleControl);
|
|
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
|
|
map.addControl(navControl);
|
|
var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
|
|
map.addControl(overviewControl);
|
|
}
|
|
//定位
|
|
function theLocation() {
|
|
var city = document.getElementById("cityName").value;
|
|
if (city != "") {
|
|
map.centerAndZoom(city, 13); // 用城市名设置地图中心点
|
|
}
|
|
}
|
|
var map;
|
|
initMap();
|
|
var curMkr
|
|
var mkrTool = new BMapLib.MarkerTool(map, { autoClose: true, followText: "添加设备" });
|
|
mkrTool.addEventListener("markend", function (evt) {
|
|
curMkr = evt.marker;
|
|
curMkr.enableDragging();
|
|
var label = new BMap.Label($(".devcode").val(), { offset: new BMap.Size(20, -10) });
|
|
curMkr.setLabel(label);
|
|
map.centerAndZoom(curMkr.point, 18);
|
|
curMkr.addEventListener("dragend", function () {
|
|
$(".devloc").val(curMkr.point.lng + "," + curMkr.point.lat);
|
|
|
|
getAddress(curMkr.point);
|
|
map.centerAndZoom(curMkr.point, 18);
|
|
});
|
|
$(".devloc").val(curMkr.point.lng + "," + curMkr.point.lat);
|
|
getAddress(curMkr.point);
|
|
});
|
|
function OpenOverlay() {
|
|
if (curMkr != null)
|
|
map.removeOverlay(curMkr);
|
|
mkrTool.open();
|
|
}
|
|
|
|
function getAddress(point) {
|
|
|
|
var myGeo = new BMap.Geocoder();
|
|
|
|
// 根据坐标得到地址描述
|
|
|
|
myGeo.getLocation(point, function (result) { if (result) { $(".devaddr").val(result.address); } });
|
|
|
|
}
|
|
</script>
|
|
|