百度地图1.1 从0开始

气势如虹-

于 2022-08-15 20:03:36 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/Js_qishiruhong/article/details/126353588

版权

echarts

百度地图案例+异步加载★★★★★

在对性能敏感的场景下，我们可以选择异步加载百度地图，从而加快首屏的渲染速度

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .anchorBL {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script> -->
  <script>
    function init() {
      let myMap = new BMapGL.Map("map");
      let point = new BMapGL.Point(121.66805, 31.14794);
      myMap.centerAndZoom(point, 20);
      myMap.enableScrollWheelZoom();
      myMap.setTilt(60);
      myMap.setHeading(30);
    }

    function loadScript() {
      let script = document.createElement("script");
      script.src = "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh&callback=init";
      document.body.appendChild(script);
    }
    window.onload = loadScript;
  </script>
</html>