Skip to content

全景展示

  • 全景展示就是显示街边的街景
html
<!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 {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
      }
      #allmap {
        width: 100%;
        height: 100%;
      }
      p {
        margin-left: 5px;
        font-size: 14px;
      }
    </style>
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"
    ></script>
    <title>显示全景控件</title>
  </head>
  <body>
    <div id="allmap"></div>
    <p>在地图上添加全景控件,点击全景控件进入全景图</p>
  </body>
</html>
<script type="text/javascript">
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(117.356921, 39.082631), 18);
  map.enableScrollWheelZoom(true);
  // 覆盖区域图层测试
  map.addTileLayer(new BMap.PanoramaCoverageLayer());

  var stCtrl = new BMap.PanoramaControl(); //构造全景控件
  stCtrl.setOffset(new BMap.Size(20, 20));
  map.addControl(stCtrl); //添加全景控件
</script>