示例中心
您当前的位置:开发文档 > JavaScript API GL > 示例DEMO
JSAPI GL 示例

地图基础-创建地图

创建GL地图
GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度
异步加载地图
该示例展示如何异步进行地图加载
加载两个地图
该示例展示如何同时加载两个地图
根据城市名设置中心点
初始化地图时,将城市中心点设置为地图中心点坐标并进行地图加载

地图基础-地图属性

设置/获取地图级别
该示例展示如何设置和获取地图的缩放级别
设置/获取地图中心点
该示例展示如何设置和获取地图的中心点坐标
设置地图最大/最小级别
1.创建地图实例时,通过opts方式设置地图允许的最大最小级别,2.通过地图的方法设置地图允许的最大最小级别
设置地图3D视角
该示例展示如何设置地图的旋转角度和倾斜角度
设置底图POI的显示/隐藏
该示例展示如何对底图POI进行显示和隐藏
设置元素的显示/隐藏
该示例展示如何对覆盖物/图层/3D建筑物进行显示和隐藏
设置路网显示/隐藏
通过map.setTrafficOn方法可以向地图添加交通流量图层
设置天空颜色
该示例展示如何自定义天空颜色
设置底图可点
该示例展示地图点击获取信息
增加自定义底图poi
该示例展示向底图添加可参与碰撞的label
地图点坐标
该示例展示添加地面点覆盖物

地图基础-地图控件

添加比例尺/缩放控件
该示例展示如何添加比例尺控件和缩放控件
添加3D控制控件
该示例展示如何添加3D控件
添加定位相关控件
该示例展示如何创建定位控件和添加定位事件
添加城市列表控件
该示例展示如何将城市选择列表控件添加到地图上
添加第三方版权控件
该示例展示如何在地图上添加自定义版权控件
添加自定义控件
该示例展示如何在地图上添加自定义控件

覆盖物-通用属性

添加/清除覆盖物
该示例展示如何在地图上添加和清除覆盖物

覆盖物-点覆盖物

添加点标记
该示例展示如何在地图上在地图上添加点标记
点标记可拖拽
该示例展示如何设置可拖拽的点标记
自定义Marker图标
该示例展示如何设置Marker标注图标的样式
点标记添加点击事件
该示例展示如何给点标记添加点击事件
带高度的点
该示例展示如何绘制带高度的点
带高度的点纹理贴图
该示例展示如何给带高度的点赋予纹理贴图
自定义文本标注
该示例展示如何自定义文本标注样式
Symbol加载图标
该示例展示可通过Symbol加载图标
svg加载以及动画图标
该示例展示svg加载以及动画图标

覆盖物-矢量图形覆盖物

镂空面绘制
该示例展示如何绘制镂空面
线面圆可编辑
该示例展示如何开启和关闭折线/多边形/圆形的编辑状态
贝塞尔曲线
该示例展示如何绘制贝塞尔曲线
彩虹渐变线
该示例展示如何绘制彩虹渐变线
3D棱柱
该示例以北京市为例展示如何绘制3D棱柱

覆盖物-自定义覆盖物

添加自定义覆盖物
该示例展示如何添加自定义覆盖物
自定义canvas覆盖物
该示例展示如何添加自定义canvas覆盖物
自定义DOM覆盖物
该示例展示如何添加自定义DOM覆盖物

覆盖物-叠加层

地面图片叠加层
该示例展示png图片在地图上的叠加
地面Canvas叠加层
该示例展示canvas图层在地图上的叠加
地面Video叠加层
该示例展示视频图层在地图上的叠加
叠加路况图层
该示例展示交通流量图层在地图上的叠加和删除

覆盖物-信息窗口

添加信息窗口
该示例展示如何给Marker创建简单信息窗口对象
添加图文组合的信息窗口
该示例展示如何给Marker创建图文组合的信息窗口对象
添加带检索功能的信息窗口
该示例展示如何给Marker创建图文组合的信息窗口对象
获取信息窗口的内容
该示例展示如何获取信息窗口的内容

覆盖物-右键菜单

地图添加右键菜单
该示例展示如何在地图上添加右键点击菜单

覆盖物-轨迹运动

大地线路书
该示例展示如何在地图上添加大地线路书
展示3D视角动画
该示例展示如何在地图上播放3D视角的动画
轨迹视角动画
该示例展示如何在地图上展示轨迹动画
轨迹动画暂停与继续
该示例展示如何在地图上控制轨迹动画的暂停与继续

覆盖物-三维模型

三维模型图层
该示例展示三维模型图层

事件-地图事件

地图加载完成事件
该示例展示如何在地图上添加加载完成事件
地图单击事件
该示例展示如何在地图上添加地图单击事件
注销事件
该示例展示如何在地图上注销事件

事件-覆盖物事件

覆盖物鼠标事件
该示例展示如何给覆盖物添加鼠标事件
棱柱鼠标事件
该示例展示如何给棱柱添加鼠标事件
带高度的点鼠标事件
该示例展示如何给带高度的点添加鼠标事件
传递事件参数
该示例展示如何传递事件参数

地图样式-个性化地图

根据json文件实现个性化地图
地图支持根据json文件实现个性化地图

地图样式-卫星地图

普通卫星地图
该示例展示如何设置地图类型为普通卫星模式BMAP_SATELLITE_MAP
卫星地球
该示例展示如何设置地图类型为地球模式BMAP_EARTH_MAP
卫星地图加载路网
该示例展示如何在卫星地图加载路网

地图样式-全景图

全景控件展示
在地图上添加全景控件,点击全景控件进入全景图
获取指定的全景图
按经纬度/全景id获取指定的全景图
叠加全景图层
全景图层用于展示全景覆盖的城市范围
显示/隐藏全景导航控件
在全景图中显示/隐藏导航控件
显示/隐藏全景道路指引控件
在全景图中显示/隐藏道路指示控件
添加全景标注点示例
在全景地图里添加标注
全景图旋转
以指定位置为中心通过不断改变heading角度达到旋转效果
获取全景图数据
该示例展示如何获取全景图数据

地图样式-区域掩膜

展示部分区域
掩膜-只展示地图指定区域
隐藏某块区域
掩膜-隐藏某块区域

检索服务-检索示例

关键字检索
该示例返回北京市“景点”关键字的检索结果,并展示在地图上
多关键字检索
该示例返回多关键字的检索结果,并展示在地图上
矩形区域检索
该示例展示在矩形区域内按关键词检索
圆形区域检索
该示例返回北京市地图上圆形覆盖范围内的“餐馆”检索结果,并展示在地图上
本地检索的结果面板
该示例提供本地搜索的结果面板
本地检索的数据接口
该示例提供本地搜索的数据接口

检索服务-输入提示示例

关键字提示输入
该示例提供关键字输入提示词条

路线规划-驾车线路规划

根据起终点经纬度查询驾车路线
该示例根据起点和终点经纬度展示驾车导航路线
计算驾车时间和距离
该示例展示从西单到上地驾车需要的距离和时间

路线规划-步行规划

根据起终点名称规划步行线路
该示例展示从西单到慈云寺的步行规划路线
步行规划结果面板
该示例展示从西单到慈云寺的步行导航结果面板

路线规划-公交检索接口

查询公交、地铁线路
该示例展示公交/地铁线路查询方法
获取公交换乘的时间、距离
该示例展示从上地到西单坐公交需要的时间和距离
根据起终点经纬度查询公交换乘
该示例展示根据起终点经纬度查询公交换乘的方式
起终点不明确的公交换乘
该示例展示多选择终点的公交换乘查询

路线规划-骑行路线规划

骑行路线规划
该示例展示骑行路线规划的结果

其他LBS服务-正/逆地址解析

地址解析
该示例对单个地址进行解析
地址批量解析
该示例对多个地址进行解析
地址逆解析
该示例通过点击展示单个地点详细的地址
地址批量逆解析
该示例通过点击展示多个地点详细的地址

其他LBS服务-坐标转换

火星坐标转成百度坐标
该示例提供GCJ02坐标转成百度坐标的示例
原始坐标转成百度坐标
该示例提供WGS84坐标转成百度坐标的示例
批量坐标转换
该示例提供多个坐标转换的示例

其他LBS服务-定位示例

根据城市名定位
该示例根据城市名称定位并用城市名设置地图中心点
根据经纬度定位
该示例根据经纬度设置地图中心点
行政区划归属获取
该示例通过鼠标点击获取某一地点的行政区划归属
定位当前城市
定位当前城市

图层服务-三方标准图层

WMS图层
支持加载OGC标准的WMS地图服务
WMTS图层
支持加载OGC标准的WMTS地图服务
TMS图层
支持TMS服务瓦片加载
自定义栅格图层
支持自定义图层瓦片加载

图层服务-简易行政区图层

行政大区
支持行政大区图层
多级省区
支持多级省区图层
行政区划鼠标事件
支持行政区划鼠标事件

图层服务-像素个性化

图像覆盖物
图像覆盖物
基于第三方标准图层
基于第三方标准图层
MapVGL像素图层
MapVGL像素图层

图层服务-GeoJSON图层

GeoJSONLayer图层
GeoJSONLayer图层
GeoJSONParse立体效果
GeoJSONParse立体效果

图层服务-MVT标准图层

MVT标准图层
MVT标准图层

图层服务-点图层

形状点
形状点
图标点
图标点

图层服务-线图层

标准线
标准线
贴图线
贴图线
间隔图标填充
间隔图标填充
蚯蚓线
蚯蚓线
节点线
节点线

图层服务-面图层

标准面
标准面
纹理填充面
纹理填充面

图层服务-自定义HTML图层

自定义canvas图层
自定义canvas图层
自定义gif动画
自定义gif动画

图层服务-车位动态数据图层

智能停车位图层
智能停车位图层

辅助工具-BMapGLLib(GL版)

鼠标测距功能
该示例基于JSAPI GL版的开源工具库实现鼠标测距工具
鼠标绘制功能
该示例基于JSAPI GL版的开源工具库实现鼠标绘制工具
面积测量
该示例基于JSAPI GL版的开源工具库实现面积测量工具
区域限制
通过输入限定浏览的地图区域的Bounds值,则地图浏览者只能在限定区域内浏览地图
路书
该示例展示路书功能的实现
富文本标记
该示例展示富文本标记功能的实现
自定义信息窗口
该示例展示自定义信息窗口的实现

室内图图层-室内图展示

室内图展示
该示例获取室内图展示

地铁图JS API-地铁

地铁图展示
该示例获取北京地铁数据并进行地铁图展示
缩放控件
该示例获取北京地铁图添加缩放控件
站点标注
该示例为西直门站添加Marker标注
信息窗口
该示例为西直门站添加InfoWindow
站点点击事件
该示例为北京市地铁站点增加了点击事件
地铁图加载事件
该示例展示了地铁图加载完成事件
站点详情检索
该示例展示了西直门站的站点详情
地铁路线规划
该示例展示了西直门站到西红门站的地铁路线规划