jspopularGL | 百度地图API SDK
浏览器版本低！无法浏览完整内容，建议升级或更换浏览器。
为什么选择百度地图
功能与服务
NEW !
解决方案
开发文档
反馈与帮助
服务升级
控制台
搜索
Created with Sketch.
热门推荐
暂无推荐，自己搜搜看！
历史搜索
暂无搜索历史...
没有Match的答案？试试对话大模型
我是智能客服，有问题可以问我哦！
NEW !
智能客服
编组 7
常见问题
qrcode copy
Created with Sketch.
公众号二维码
message copy
Created with Sketch.
商务合作
Import Copy
Created with Sketch.
回到顶部
文档全面上新
更科技的视觉体验，更高效的页面结构，快前往体验吧！
体验新版
JavaScript API GL
服务介绍
升级指南
开发指南
入门指南
账号和获取密钥
使用须知
Hello World
坐标转换说明
React-BMapGL指南
创建地图
展示地图
变更地图类型
添加控件
个性化地图
覆盖物
绘制点、线、面
带高度的点
镂空面绘制
3D棱柱绘制
地面叠加层
文本标注
信息窗口
自定义覆盖物
事件处理
地图事件
右键菜单
动态效果
自定义视角动画
轨迹动画
LBS服务
正/逆地址解析
出行路线规划
定位
图层服务
线图层
面图层
自定义HTML图层
交通流量图层
GeoJSON图层
MVT标准图层
三方标准图层
简易行政区划图层
区域掩膜
像素个性化
室内图
全景图
智能停车位图层
类参考
示例DEMO
更新日志
常见问题
GL工具库BMapGLLib
BMap Draw
其他版本
JavaScript API v3.0
JavaScript API Lite
友情链接
React-BMapGL指南
个性化地图编辑器
Hello World更新时间：2022年08月07日百度地图的“Hello, World”
开始学习百度地图JS API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用，快速创建一张“我的地图”。
如下代码可以实现一个简单完整的全屏展示的地图Demo：<!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>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
DEMO详情
下面我们分步向您介绍如何快速开始地图开发：
1申请百度账号和ak点我申请2准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：
<!DOCTYPE html>
您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
3适应移动端页面展示
下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4设置容器样式
设置容器样式大小，使地图充满整个浏览器窗口：
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
5引用百度地图API文件<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
</script>
6创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
<div id="container"></div>
7创建地图实例
位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMapGL.Map("container");
注意：
1、在调用此构造函数时应确保容器元素已经添加到地图上；
2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；
8设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMapGL.Point(116.404, 39.915);
注意：
在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。
9地图初始化，同时设置地图展示级别
在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
map.centerAndZoom(point, 15);
至此，我们就快速创建了一张以天安门为中心的地图。地图配置与操作
JS API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。
此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setTilt()、setCenter()、panTo()、zoomTo()等等。详细可以参考示例DEMO。
取自“http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld&oldid=17572”
文档根本没法用
文档水平很差
文档水平一般
文档不错
文档写的很好
如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。
提交反馈
拖动标注工具
添加矩形标注
添加箭头标注
完成
取消
地图审图号：GS(2022)460|测绘资质：甲测资字11111342
©2023 Baidu 使用百度前必读 京ICP证030173号