第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
<div class="h1-title">JavaScript API GL</div><div id="update-time1">更新时间:2022年07月20日 </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>产品简介</span></div></div></div><div class="serve-explain-text"> | <div class="h1-title">JavaScript API GL</div><div id="update-time1">更新时间:2022年07月20日 </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>产品简介</span></div></div></div><div class="serve-explain-text"> | ||
− | + | 百度地图JavaScript API GL 是一套由JavaScript语言编写的应用程序接口,使用了WebGL对地图、覆盖物等进行渲染,支持3D视角展示地图。帮助开发者在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发。JavaScript API GL提供了丰富的功能接口,包括地图展示、定位、覆盖物、检索、路线规划等,适配多样化的业务场景。 | |
− | + | ||
− | + | 百度地图JavaScript API支持HTTP和HTTPS,免费对外开放。在使用前,您需先[http://lbsyun.baidu.com/apiconsole/key?application=key 申请密钥(ak)]才可使用。在您使用百度地图JavaScript API之前,请先阅读[https://lbsyun.baidu.com/index.php?title=open/law 百度地图开放平台《服务条款》]。任何非营利性应用请直接使用,商业应用请参考[http://lbsyun.baidu.com/index.php?title=open/question 使用须知]。 | |
− | <!-- <p >JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染,支持3D视角展示地图。 GL版本接口基本向下兼容,迁移成本低。</p> --> | + | |
− | </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>核心功能指引</span></div></div></div><div id="update-time">入门指南</div><ul style="display: flex; margin: 0; font-family: PingFangSC-Regular; | + | JavaScript API GL的使用方式请参考[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show 开发指南],详细的接口类说明请参考[https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html 类参考]文档,快速了解JavaScript API GL可支持的功能请参考[https://lbsyun.baidu.com/index.php?title=open/jsdemo 示例中心]提供的示例demo。如果您在使用过程遇到技术问题,可查看[https://lbsyun.baidu.com/faq/search 常见问题]或通过工单[https://lbsyun.baidu.com/apiconsole/fankui 联系我们]。 |
+ | <!-- <p >JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染,支持3D视角展示地图。 GL版本接口基本向下兼容,迁移成本低。</p> --></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>核心功能指引</span></div></div></div><div id="update-time">入门指南</div><ul class="content-ul" style="display: flex; margin: 0; font-family: PingFangSC-Regular;"> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey 账号和获取秘钥]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey 账号和获取秘钥]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/usage 使用须知]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/usage 使用须知]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld Hello World]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld Hello World]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/coorinfo 坐标转换说明]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/coorinfo 坐标转换说明]</li> | ||
− | <li | + | <li>[https://lbsyun.baidu.com/solutions/reactBmapDoc React-BMapGL指南]</li> |
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">创建地图</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular; | + | <div id="update-time" style="margin-top: 24px;">创建地图</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/show 展示地图]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/show 展示地图]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/maptype 变更地图类型]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/maptype 变更地图类型]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/widget 添加控件]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/widget 添加控件]</li> | ||
− | <li | + | <li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/custom 个性化地图]</li> |
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">覆盖物</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular; | + | <div id="update-time" style="margin-top: 24px;">覆盖物</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/addOverlay 绘制点、线、面]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/addOverlay 绘制点、线、面]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=Marker3d 带高度的点]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=Marker3d 带高度的点]</li> | ||
第26行: | 第27行: | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/label 文本标注]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/label 文本标注]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/infoWindow 信息窗口]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/infoWindow 信息窗口]</li> | ||
− | <li >[https:// | + | <li>[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/CustomOverlay 自定义覆盖物]</li> |
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">事件处理</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular; | + | <div id="update-time" style="margin-top: 24px;">事件处理</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/event 地图事件]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/event 地图事件]</li> | ||
− | <li | + | <li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/contextMenu 右键菜单]</li> |
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">动态效果</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular; | + | <div id="update-time" style="margin-top: 24px;">动态效果</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/viewAnimation 自定义视角动画]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/viewAnimation 自定义视角动画]</li> | ||
<li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/trackAnimation 轨迹动画]</li> | <li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/trackAnimation 轨迹动画]</li> | ||
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">LBS服务</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular; | + | <div id="update-time" style="margin-top: 24px;">LBS服务</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/geocoding 正/逆地址解析]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/geocoding 正/逆地址解析]</li> | ||
<li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/routeplan 出行路线规划]</li> | <li style="margin-right: 15px;">[https://lbs.baidu.com/index.php?title=jspopularGL/guide/routeplan 出行路线规划]</li> | ||
<li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/geoloaction 定位]</li> | <li>[https://lbs.baidu.com/index.php?title=jspopularGL/guide/geoloaction 定位]</li> | ||
</ul> | </ul> | ||
− | <div id="update-time" style="margin-top: 24px;">图层服务</div><ul style="display: flex;margin: 0; font-family: PingFangSC-Regular;" | + | <div id="update-time" style="margin-top: 24px;">图层服务</div><ul class="content-ul" style="display: flex;margin: 0; font-family: PingFangSC-Regular;"> |
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/LineLayer 线图层]</li> | ||
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/FillLayer 面图层]</li> | ||
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/CustomhtmlLayer 自定义HTML图层]</li> | ||
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trafficLayer 交通流量图层]</li> | ||
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/geoJsonLayer GeoJSON图层]</li> | ||
+ | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/mvtLayer MVT标准图层]</li> | ||
<li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trilateralLayer 三方标准图层]</li> | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trilateralLayer 三方标准图层]</li> | ||
− | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title= | + | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=district 简易行政区划图层]</li> |
<li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/AreaMask 区域掩膜]</li> | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/AreaMask 区域掩膜]</li> | ||
<li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/PixelPersonalization 像素个性化]</li> | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/PixelPersonalization 像素个性化]</li> | ||
<li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/indoorMap 室内图]</li> | <li style="margin-right: 15px;">[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/indoorMap 室内图]</li> | ||
− | <li >[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/panoMap | + | <li>[https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/panoMap 全景图]</li> |
</ul> | </ul> | ||
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>核心功能体验</span></div></div></div> | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>核心功能体验</span></div></div></div> | ||
{{jspopularGL核心功能体验}} | {{jspopularGL核心功能体验}} |
2023年4月11日 (二) 14:20的最后版本
JavaScript API GL
更新时间:2022年07月20日
产品简介
百度地图JavaScript API GL 是一套由JavaScript语言编写的应用程序接口,使用了WebGL对地图、覆盖物等进行渲染,支持3D视角展示地图。帮助开发者在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发。JavaScript API GL提供了丰富的功能接口,包括地图展示、定位、覆盖物、检索、路线规划等,适配多样化的业务场景。
百度地图JavaScript API支持HTTP和HTTPS,免费对外开放。在使用前,您需先申请密钥(ak)才可使用。在您使用百度地图JavaScript API之前,请先阅读百度地图开放平台《服务条款》。任何非营利性应用请直接使用,商业应用请参考使用须知。
JavaScript API GL的使用方式请参考开发指南,详细的接口类说明请参考类参考文档,快速了解JavaScript API GL可支持的功能请参考示例中心提供的示例demo。如果您在使用过程遇到技术问题,可查看常见问题或通过工单联系我们。
核心功能指引
入门指南
创建地图
覆盖物
事件处理
动态效果
LBS服务
图层服务
核心功能体验