展示地图 | 百度地图API SDK

所有文档

JSAPI GL

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

其他版本

JavaScript API v3.0 JavaScript API Lite

友情链接

React-BMapGL指南个性化地图编辑器

更新时间: 2026/03/12 14:32

展示地图

地图展示

我们通过一个例子来说明如何创建一个简单的地图页面，下面是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,
});

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

React-BMapGL指南

变更地图类型

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

地图展示