btxtgxq-system-bigdata/src/main/resources/static/route/kpi/detail/map/case-map.html
2023-04-05 17:40:55 +08:00

69 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/bigdata/">
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div style="padding: 15px; background-color: #FFF">
<div id="container"></div>
</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=oWU9RD4ihDHAafexgI6XOrTK8lDatRju"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'table', 'laytpl', 'form','laydate'], function() {
var $ = layui.$;
var $win = $(window);
var queryParams = top.restAjax.params(window.location.href);
var lat = queryParams.lat;
var lng = queryParams.lng;
function init() {
var map;
function size() {
$('#container').css({
height: `${$win.height() - 30}px`
})
}
function map() {
var point = new BMapGL.Point(lng, lat);
var marker = new BMapGL.Marker(point);
// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();
// 添加城市列表控件
var cityCtrl = new BMapGL.CityListControl();
var mapTypeCtrl = new BMapGL.MapTypeControl();
map = new BMapGL.Map("container");
map.centerAndZoom(point, 15);
map.addOverlay(marker);
//设置地图旋转角度
map.setHeading(64.5);
//设置地图的倾斜角度
map.setTilt(73);
map.addControl(scaleCtrl);
map.addControl(zoomCtrl);
map.addControl(cityCtrl);
map.addControl(mapTypeCtrl);
map.enableScrollWheelZoom();
}
size();
map();
}
init();
});
</script>
</body>
</html>