“jspopularGL

2025年9月2日 (二) 18:24的最后版本

展示地图

更新时间：2022年08月07日

地图展示

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

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

文档全面上新

2025年9月2日 (二) 18:24的最后版本