问题1：图会覆盖顶部菜单和底部版权栏？
问题2：代码FN这里在移动端定位是正常的，一到PC端定位就不正确，求高手改良完善？
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>地图 - XMCC</title>
<link rel="shortcut icon" href="https://xmcc.cn/ico/favicon.ico">
<!-- 统计 -->
<script type="text/javascript" src="https://xmcc.cn/xm/js/tongji.js"></script>
<!-- 结束统计 -->
<!--建立:css css/css.css-->
<link href="https://xmcc.cn/xm/js/caidan/css/css.css" rel="stylesheet" type="text/css">
<!--结束建立-->
<!--建立:css css/normalize.css-->
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/normalize.css" media="screen">
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/basic-styles.css" media="screen">
<!--结束建立-->
<!--建立:css css/okayNav.css-->
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/header.css" media="screen">
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/okayNav-base.css" media="screen">
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/okayNav-theme.css" media="screen">
<!--结束建立-->
</head>
<body>
<!-- 菜单 -->
<header id="header" class="okayNav-header">
<img src='https://xmcc.cn/ico/xmcc-logo-w.png' width='20%'>
<nav role="navigation" id="nav-main" class="okayNav">
<ul>
<li><a href="/" target="_blank">首页</a></li>
<li><a href="http://xmcc.cn/xm/home/" target="_blank">关于我们</a></li>
<li><a href="http://xmcc.cn/xm/guanzhu/weibo/" target="_blank">关注我们</a></li>
<li><a href="http://xmcc.cn/xm/zhifu/" target="_blank">云支付</a></li>
<li><a href="http://xmcc.cn/xm/gongju/shipin/" target="_blank">云视频</a></li>
<li><a href="http://xmcc.cn/xm/gongju/ditu/" target="_blank">云地图</a></li>
<li><a href="http://xmcc.cn/xm/kaifa/" target="_blank">开发者</a></li>
<li><a href="http://xmcc.cn/xm/gongju/rili/" target="_blank">万年历</a></li>
<li><a href="http://xmcc.cn/xm/guanzhu/youxiang/" target="_blank">技术支持</a></li>
</ul>
</nav>
</header>
<!-- 结束菜单 -->
<main>
<!-- 内容 -->
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<script type='text/javascript' src='https://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥'></script>
<script>
var map;
var zoom = 12;
function onLoad() {
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(118.138332,24.49113), zoom);
//获取定位坐标
var lo = new T.Geolocation();
fn = function (e) {
if (this.getStatus() == 0){
map.centerAndZoom(e.lnglat, 15)
alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
if(this.getStatus() == 1){
map.centerAndZoom(e.lnglat, e.level)
alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
}
lo.getCurrentPosition(fn);
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
//创建比例尺控件对象
var scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
//添加鹰眼控件
var miniMap = new T.Control.OverviewMap({
isOpen: true,
size: new T.Point(150, 150)
});
map.addControl(miniMap);
//创建地图类型对象
var ctrl = new T.Control.MapType();
//添加地图类型控件
map.addControl(ctrl);
}
</script>
</head>
<body onLoad='onLoad()'>
<div id='mapDiv' style='position:absolute;width:100%; height:100%'></div>
</body>
<!-- 结束内容 -->
</main>
<!--建立:js js/jquery-2.2.3.min.js -->
<script src="https://xmcc.cn/xm/js/caidan/js/jquery-2.2.3.min.js"></script>
<!-- 结束建立 -->
<!--建立:js js/jquery.okayNav.js -->
<script src="https://xmcc.cn/xm/js/caidan/js/jquery.okayNav.js"></script>
<!-- 结束建立 -->
<script type="text/javascript">
var navigation = $('#nav-main').okayNav();
</script>
</body>
<!-- 固定底部版权栏 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
padding-bottom: 50px;
}
.footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%; '宽度定位'
height: 25px; '高度定位'
text-align: center;
background-color: #fff; '版权底部颜色'
z-index: 9999;
}
</style>
</head>
<body>
<div class="footer">
<!-- 引用动态版权信息 -->
<style type="text/css">
#footer {
text-align: center;
}
</style>
<div id="footer">
</div>
<script type="text/javascript" src="https://xmcc.cn/xm/js/Copyright.js"></script>
<!-- 引用动态版权信息 -->
</div>
</body>
<!-- 固定底部版权栏 -->
</html>
你是说滚动，会遮盖了导航栏？你把id=mapDiv的height：83%;试试