展示地图 | JSAPI GL | 百度地图开放平台文档中心

所有文档

JSAPI GL

服务介绍升级指南类参考示例DEMO 更新日志常见问题 GL工具库BMapGLLib BMap Draw

其他版本

友情链接

更新时间: 2026/07/27 10:37

您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目，不建议用于新项目开发。新项目请使用 JSAPI 4.0，如需升级现有项目，请参考升级指南。
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.

展示地图

地图展示

我们通过一个例子来说明如何创建一个简单的地图页面，下面是DEMO示例。

DEMO详情

1. 编写HTML页面的基础代码

在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。


<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Baidu Map </title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>  
</head>  
<body>
</body>  
</html>

2. 引入百度地图API文件


<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

3. 初始化地图逻辑

首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图


var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

4. 开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的，需要配置开启。


map.enableScrollWheelZoom();     //开启鼠标滚轮缩放

5. 设置地图的旋转角度和倾斜角度

地图可以自定义旋转角度和倾斜角角度


map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

6. 设置gcj02坐标

需要在初始化地图前面配置参数 BMapGL.coordType


// 初始化地图的配置如下：
BMapGL.coordType = BMAP_COORD_GCJ02;
var map = new BMapGL.Map("allmap", {
  coordType: BMAP_COORD_GCJ02,
  enableIconClick: true
});
// 绘制marker和信息窗口需要自身进行配置，参数如下：
// marker设置如下
let marker = new BMapGL.Marker(new BMapGL.Point(116.162668,39.901105),{
   coordType: BMAP_COORD_GCJ02
});
// 信息窗口设置如下
map.openInfoWindow(infoWindow,point,{
   coordType: BMAP_COORD_GCJ02,
});

至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。

鼠标绘制库 BMap Draw

变更地图类型

本篇文章对您是否有帮助？

地图展示