百度地图JS API不能使用position:fixed
用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时，js会报如下错误：
Uncaught TypeError: Cannot read property 'offsetLeft' of null
解决办法：对地图使用position:absolut模拟fixed样式。
若要实现地图背景固定，前面列表滚动的样式，对前面列表使用overfollw-y:scroll。对其设置下面样式可以隐藏滚动条：
::-webkit-scrollbar {
width:;
background-color: transparent;
}
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>地图不能fixed</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<style>
.map-container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
} #map {
width: 100%;
height: 100%;
} .list-container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow-y: scroll;
} .list-map {
width: 100%;
height: 300px;
} .list {
width: 100%;
height: 1300px;
background-color: yellow;
} /*隐藏滚动条样式*/
::-webkit-scrollbar {
width: 0;
background-color: transparent;
} </style>
</head>
<body>
<div class="map-container">
<div id="map"></div>
</div>
<div class="list-container">
<div class="list-map"></div>
<div class="list">哈哈哈</div>
</div> <script>
// 创建Map实例
var map = new BMap.Map("map");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
</script>
</body>
</html>
百度地图JS API不能使用position:fixed的更多相关文章
- 关于百度地图js api的getCurrentPosition定位不准确的解决方法
很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 百度地图 js api 实现 line 居中显示
项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...
- 百度地图js lite api 支持点聚合
百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer: http ...
- 如何结合自己本地数据库，使用【百度地图】API
如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...
- 百度地图的API接口----多地址查询和经纬度
最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...
- 腾讯地图JS API实现带方向箭头的线路Polyline
最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图--JS版
百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...
随机推荐
- 《The Mythical Man-Month（人月神话）》读后感（1）
临近考试周,这里我通过平时阅读的<人月神话>十九个章节和知乎.简书等网页中网友们对<人月神话>的读后感,对书中各个章节进行简单的总结,以下均为个人手打观点的思考与整合,仅供大家 ...
- IPC_Binder_java_2
title: IPC_Binder_java_2 date: 2017-07-04 14:47:55 tags: [IPC,Binder] categories: [Mobile,Android] - ...
- Python模块xlwt对excel进行写入操作
python常用模块目录 1.安装 $ pip install xlwt 2.创建表格和工作表单写入内容 例子: import xlwt # 创建一个workbook 设置编码 workbook = ...
- init命令详解
基础命令学习目录首页 1.手动输入命令会执行相关操作 #init 0 - 停机(千万不能把initdefault 设置为0 ) #init 1 - 单用户模式 #init 2 - 多用户, ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- 导出excel失败，提示提示加载类型库/DDL出错
首先,这里提供的解决办法仅适用于出现如下异常的情况:无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制转换为接口类型“M ...
- 3、昨天的BUG
基本功能实现了,但是有一些小问题,修改昨天余留的BUG
- ubuntu16.04+pycharm+默认文件头注释
安装 1.sudo gedit /etc/hosts 2.最后一行添加 0.0.0.0 account.jetbrains.com 3.从 http://idea.lanyus.com/ 中获取激活码 ...
- caffe with anaconda
https://blog.csdn.net/u013498583/article/details/74231058 https://www.cnblogs.com/youxin/p/4073703.h ...
- Teamwork（The sixth day of the team）
每日列会过后,我们的工作进度都有所进展了,好开心,但是还不是我们想要的,我们想做得更快,更好.