百度地圖JS API不能使用position:fixed

時間 2019-11-20

標籤百度地圖 api 不能使用 position fixed 欄目 JavaScript 简体版

原文原文鏈接

用於放置百度地圖的dom元素及其任何一級父元素設置position:fixed屬性時，js會報以下錯誤：javascript

Uncaught TypeError: Cannot read property 'offsetLeft' of nullhtml

解決辦法：對地圖使用position:absolut模擬fixed樣式。java

若要實現地圖背景固定，前面列表滾動的樣式，對前面列表使用overfollw-y:scroll。對其設置下面樣式能夠隱藏滾動條：web

::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
}

demo:api

<!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>