十三 百度地圖入門(mén)

←可視化技術(shù)對(duì)比

百度開(kāi)發(fā)者賬號(hào)申請(qǐng)

基本用法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <title>地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMapGL.Map("allmap"); // 創(chuàng)建Map實(shí)例
    var point = new BMapGL.Point(116.404, 39.915); // 初始化中心點(diǎn)坐標(biāo) 
    map.centerAndZoom(point, 12);  // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
    map.enableScrollWheelZoom(true);     //開(kāi)啟鼠標(biāo)滾輪縮放
</script>

百度地圖的繪圖流程

1. 引入 js 庫(kù)，注意需要附帶申請(qǐng)的密鑰 ak;
2. 編寫(xiě)容器組件;
3. 初始化 Map 對(duì)象;
4. 初始化 Point 對(duì)象;
5. 設(shè)置中心點(diǎn)和地圖級(jí)別;

異步加載

在對(duì)性能敏感的場(chǎng)景下，我們可以選擇異步加載百度地圖，從而加快首屏的渲染速度

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <title>異步地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    function init() { 
        var map = new BMapGL.Map('allmap'); 
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom(true);
    } 
            
    function loadScript() { 
        var script = document.createElement("script"); 
        script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb&callback=init";
        document.body.appendChild(script); 
    } 
            
    window.onload = loadScript;
</script>

3D地圖

我們可以使用 heading 和 tilt 屬性控制地圖的旋轉(zhuǎn)角度和俯角
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    #allmap { position: relative; }
    #tools { position: absolute; left: 0; top: 0; z-index: 1000;}
    .tools-bar { display: flex; }
    .label { width: 80px; text-align: right; }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <title>地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="tools">
        <div class="tools-bar">
            <div class="label">heading:</div>
            <button id="heading-add">+</button>
            <input type="text" id="heading" value="40">
            <button id="heading-minus">-</button>
        </div>
        <div class="tools-bar">
            <div class="label">tilt:</div>
            <button id="tilt-add">+</button>
            <input type="text" id="tilt" value="70">
            <button id="tilt-minus">-</button>
        </div>
        <div class="tools-bar">
            <button id="loop">loop</button>
            <button id="stop">stop</button>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空間為BMapGL
    // 按住鼠標(biāo)右鍵，修改傾斜角和角度
    var map = new BMapGL.Map("allmap");    // 創(chuàng)建Map實(shí)例
  var point = new BMapGL.Point(116.280190, 40.049191);
    map.centerAndZoom(point, 19);  // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
    map.enableScrollWheelZoom(true);     // 開(kāi)啟鼠標(biāo)滾輪縮放
    map.setHeading(40);   // 設(shè)置地圖旋轉(zhuǎn)角度
    map.setTilt(70);       // 設(shè)置地圖的傾斜角度
    var heading = document.getElementById('heading');
    var headingAdd = document.getElementById('heading-add');
    var headingMinus = document.getElementById('heading-minus');
    var tilt = document.getElementById('tilt');
    var tiltAdd = document.getElementById('tilt-add');
    var tiltMinus = document.getElementById('tilt-minus');
    heading.addEventListener('input', function(e) {
        map.setHeading(e.target.value);
    });
    tilt.addEventListener('input', function(e) {
        map.setTilt(e.target.value);
    });
    headingAdd.addEventListener('click', function(e) {
        heading.value++;
        map.setHeading(heading.value);
    });
    headingMinus.addEventListener('click', function(e) {
        heading.value--;
        map.setHeading(heading.value);
    });
    tiltAdd.addEventListener('click', function(e) {
        tilt.value++;
        map.setTilt(tilt.value);
    });
    tiltMinus.addEventListener('click', function(e) {
        tilt.value--;
        map.setTilt(tilt.value);
    });
    var task;
    document.getElementById('loop').addEventListener('click', function(e) {
        task = setInterval(() => {
            if (loop) {
                heading.value++;
                map.setHeading(heading.value);
            }
        }, 100);
    });
    document.getElementById('stop').addEventListener('click', function(e) {
        task && clearInterval(task);
    })
</script>

3D地球

官方文檔

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <title>地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空間為BMapGL
    // 按住鼠標(biāo)右鍵，修改傾斜角和角度
    var map = new BMapGL.Map("allmap");
    map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
    map.enableScrollWheelZoom(true);
    map.setMapType(BMAP_EARTH_MAP);      // 設(shè)置地圖類(lèi)型為地球模式
    var scaleCtrl = new BMapGL.ScaleControl({ 
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: new BMapGL.Size(100, 10)
    });  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl({ 
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
    });  // 添加比例尺控件
    map.addControl(zoomCtrl);
</script>

添加控件

官方文檔
案例同上

個(gè)性化地圖

官方文檔

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <title>地圖展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空間為BMapGL
    // 按住鼠標(biāo)右鍵，修改傾斜角和角度
    var map = new BMapGL.Map("allmap");    // 創(chuàng)建Map實(shí)例
  var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 9);  // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
    map.enableScrollWheelZoom(true);     //開(kāi)啟鼠標(biāo)滾輪縮放
    map.setMapStyleV2({     
    styleId: 'a0c43e8c7279db0a4a032712d0e4c32c'
    });
</script>

百度地圖進(jìn)階→

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容