用于放置百度地图的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的更多相关文章

  1. 关于百度地图js api的getCurrentPosition定位不准确的解决方法

    很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...

  2. 百度地图 JS API开发Demo01

    百度地图DEMO     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  3. 百度地图 js api 实现 line 居中显示

    项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...

  4. 百度地图js lite api 支持点聚合

    百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer:  http ...

  5. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  6. 百度地图的API接口----多地址查询和经纬度

    最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...

  7. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  8. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  9. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

随机推荐

  1. XML学习（一）

    实体引用 在 XML 中,一些字符拥有特殊的意义. 如果您把字符 "<" 放在 XML 元素中,会发生错误,这是因为解析器会把它当作新元素的开始. 这样会产生 XML 错误: ...

  2. 大牛都是这样写测试用例的，你get到了嘛？

    1. 用于语句覆盖的基路径法 基路径法保证设计出的测试用例,使程序的每一个可执行语句至少执行一次,即实现语句覆盖.基路径法是理论与应用脱节的典型,基本上没有应用价值,读者稍作了解即可,不必理解和掌握. ...

  3. [机器学习]-K近邻-最简单的入门实战例子

    本篇文章分为两个部分,前一部分主要简单介绍K近邻,后一部分是一个例子 第一部分--K近邻简介 从字面意思就可以容易看出,所谓的K近邻,就是找到某个样本距离(这里的距离可以是欧式距离,曼哈顿距离,切比雪 ...

  4. 软件工程-东北师大站-第八次作业（PSP）

    1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图

  5. Task 6.4 冲刺Two之站立会议4

    今天对主界面部分的代码进行了完善,因为主界面有对于用户账号的设置.包括头像修改.增删好友.进入聊天界面等功能,包含的内容很多.我主要是负责跟聊天界面的连接以及账号设置的部分:遇到的问题有,因为这部分依 ...

  6. <!CDATA[]]用法详解

    所有 XML 文档中的文本均会被解析器解析. 只有 CDATA 区段(CDATA section)中的文本会被解析器忽略. PCDATA PCDATA 指的是被解析的字符数据(Parsed Chara ...

  7. 现代软件工程构建之法 前五章阅读感想&困惑

    第一章 第一节 新时代中国的IT产业市场规则不规范,书中提到社会上有个别软件公司的软件一定要卸载别家公司的软件才能运行,我这里感到疑惑---————是不是说如果 一间软件公司他能做出一个像微软操作系统 ...

  8. AVL树/线索二叉树

    此文转载: http://www.cnblogs.com/skywang12345/p/3577360.html AVL树是一棵特殊的高度平衡的二叉树,每个节点的两棵子树高度最大差为1.所以在每次的删 ...

  9. ReentrantLock 和 Condition的使用

    ReentrantLock  ReentrantLock可以等同于synchronized使用. ReentrantLock 类实现了Lock ,它拥有与 synchronized 相同的并发性和内存 ...

  10. CANOpen的几种操作以及数据

    其实3年前在21ic就准备做这篇文章了,那时,CANOpen也只是刚刚在国内推广,所以几乎没有项目用到.现在有了实际的项目,完全确认了以前移植和测试的代码,所以列举一些CANOpen的底层操作以及数据 ...