第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">出行路线规划</div> | + | <div class="h1-title">出行路线规划</div><div id="update-time1">更新时间:2021年7月23日 </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提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。</div><div class="jsapidemo_template"><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/sLngLatSearchPath.htm"></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath DEMO详情]</div></div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>驾车路线规划</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:1160px;"></div><div class="devguideorder"><span>1</span>基础驾车路线规划服务示例:</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle">var map = new BMapGL.Map("container"); |
− | <div id="update- | + | |
− | <div class="bluetitle"> | + | |
− | + | ||
− | </div> | + | |
− | <div class="serve-explain-text">百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。</div> | + | |
− | <div class="jsapidemo_template"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | <div class="bluetitle"> | + | |
− | + | ||
− | </div> | + | |
− | <div class="devguide"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | ||
第28行: | 第9行: | ||
driving.search(p1, p2); | driving.search(p1, p2); | ||
</pre> | </pre> | ||
− | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>公交路线规划</span></div></div></div><div class="serve-explain-text">BMapGL.TransitRoute类提供公交线路规划服务。</div><div class="devguide"><div class="leftborderbg" style="height:1015px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle">var map = new BMapGL.Map('container'); | |
− | </div> | + | |
− | <div class="bluetitle"> | + | |
− | + | ||
− | </div> | + | |
− | <div class="serve-explain-text">BMapGL.TransitRoute类提供公交线路规划服务。</div> | + | |
− | <div class="devguide"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); | ||
var output = '从上地到西单坐公交需要:'; | var output = '从上地到西单坐公交需要:'; | ||
第58行: | 第29行: | ||
transit.search(start, end); | transit.search(start, end); | ||
</pre> | </pre> | ||
− | + | </div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>步行路线规划</span></div></div></div><div class="serve-explain-text">BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。</div><div class="devguide"><div class="leftborderbg" style="height:220px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle"> var map = new BMapGL.Map("allmap"); | |
− | </div> | + | |
− | <div class="bluetitle"> | + | |
− | + | ||
− | </div> | + | |
− | <div class="serve-explain-text">BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。</div> | + | |
− | <div class="devguide"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
map.enableScrollWheelZoom(); | map.enableScrollWheelZoom(); | ||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | ||
第75行: | 第35行: | ||
walking.search('西单', '慈云寺'); | walking.search('西单', '慈云寺'); | ||
</pre> | </pre> | ||
− | + | </div></div> | |
− | </div> | + | |
− | + | ||
− | + | ||
− | + | ||
<!-- {{jspopularGL-sidebar}} | <!-- {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">地面叠加层覆盖物</div><div id="update-time">更新时间:2020年12月14日& | + | <div class="h1-title">地面叠加层覆盖物</div><div id="update-time">更新时间:2020年12月14日 </div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text"> |
JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物,覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类,基于Bounds确定在地面上的显示范围和大小,通过options来配置覆盖物的类型、源、透明度等。 | JSAPI GL提供的GroundOverlay类支持在地图底面上叠加覆盖物,覆盖物可以是图片、自定义Canvas、视频。<br/>GroundOverlay类继承Overlay类,基于Bounds确定在地面上的显示范围和大小,通过options来配置覆盖物的类型、源、透明度等。 | ||
− | </div><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath"></div></div><div class="demo_control"><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gImageGround.htm 图片叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gCanvasGround.htm Canvas叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gVideoGround.htm 视频叠加层]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#gImageGround DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">驾车路线规划</div></div><div class="devguide"><div class="leftborderbg" style="height:1160px;"></div><div class="devguideorder"><span>1</span>基础驾车路线规划服务示例:</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle">var map = new BMapGL.Map("container"); | + | </div><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo.htm#sLngLatSearchPath"></div></div><div class="demo_control"><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gImageGround.htm 图片叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gCanvasGround.htm Canvas叠加层]</div><div class="demo_btn">[https://lbsyun.baidu.com/jsdemo/demo/gVideoGround.htm 视频叠加层]</div></div><div class="jsapi-demo-link">[https://lbsyun.baidu.com/jsdemo.htm#gImageGround DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">驾车路线规划</div></div><div class="devguide"><div class="leftborderbg" style="height:1160px;"></div><div class="devguideorder"><span>1</span>基础驾车路线规划服务示例:</div><div class="devguidecenter">代码如下:<span _fck_mw_customtag="true" _fck_mw_tagname="pre" _fck_mw_tagtype="t" class="prettyprint codestyle" _fck_mw_tagattributes="class" class="fck_mw_special">var map = new BMapGL.Map("container");fckLRmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);fckLRfckLRvar p1 = new BMapGL.Point(116.301934,39.977552);fckLRvar p2 = new BMapGL.Point(116.508328,39.919141);fckLRfckLRvar driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});fckLRdriving.search(p1, p2);fckLR</span> |
− | + | </div></div><div class="bluetitle"><div class="services-title-text">公交路线规划</div></div><div class="serve-explain-text">BMapGL.TransitRoute类提供公交线路规划服务。</div><div class="devguide"><div class="leftborderbg" style="height:1015px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<span _fck_mw_customtag="true" _fck_mw_tagname="pre" _fck_mw_tagtype="t" class="prettyprint codestyle" _fck_mw_tagattributes="class" class="fck_mw_special">var map = new BMapGL.Map('container');fckLRmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);fckLRvar output = '从上地到西单坐公交需要:';fckLRvar transit = new BMapGL.TransitRoute(map,{fckLR renderOptions: {map: map},fckLR onSearchComplete: function(results){fckLR if (transit.getStatus()&nbsp;!= BMAP_STATUS_SUCCESS){fckLR return&nbsp;;fckLR }fckLR var plan = results.getPlan(0);fckLR output += '总时长:' + plan.getDuration(true); //获取时间fckLR output += '总路程:' + plan.getDistance(true); //获取距离fckLR $('#result').css('display','block');fckLR $('#result').html(output);fckLR },fckLR});fckLRvar start=new BMapGL.Point(116.404844,39.911836);fckLRvar end=new BMapGL.Point(116.308102,40.056057);fckLRtransit.search(start, end);fckLR</span> | |
− | + | </div></div><div class="bluetitle"><div class="services-title-text">步行路线规划</div></div><div class="serve-explain-text">BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。</div><div class="devguide"><div class="leftborderbg" style="height:220px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<span _fck_mw_customtag="true" _fck_mw_tagname="pre" _fck_mw_tagtype="t" class="prettyprint codestyle" _fck_mw_tagattributes="class" class="fck_mw_special">var map = new BMapGL.Map("allmap");fckLRmap.enableScrollWheelZoom();fckLRmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);fckLRvar walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});fckLRwalking.search('西单', '慈云寺');fckLR</span> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | </div></div><div class="bluetitle"><div class="services-title-text">公交路线规划</div></div><div class="serve-explain-text">BMapGL.TransitRoute类提供公交线路规划服务。</div><div class="devguide"><div class="leftborderbg" style="height:1015px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle">var map = new BMapGL.Map('container'); | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | }); | + | |
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | </div></div><div class="bluetitle"><div class="services-title-text">步行路线规划</div></div><div class="serve-explain-text">BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。</div><div class="devguide"><div class="leftborderbg" style="height:220px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下:<pre class="prettyprint codestyle">var map = new BMapGL.Map("allmap"); | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div></div> --> | </div></div> --> |
2022年8月19日 (五) 13:30的版本
出行路线规划
更新时间:2021年7月23日
简介
百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时,可以使用我们提供的默认展示效果。也可以通过监听事件回调,使用检索数据完成自己的需求。
驾车路线规划
1基础驾车路线规划服务示例:
代码如下:
var map = new BMapGL.Map("container"); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); var p1 = new BMapGL.Point(116.301934,39.977552); var p2 = new BMapGL.Point(116.508328,39.919141); var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); driving.search(p1, p2);
公交路线规划
BMapGL.TransitRoute类提供公交线路规划服务。
1使用服务示例
代码如下:
var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); var output = '从上地到西单坐公交需要:'; var transit = new BMapGL.TransitRoute(map,{ renderOptions: {map: map}, onSearchComplete: function(results){ if (transit.getStatus() != BMAP_STATUS_SUCCESS){ return ; } var plan = results.getPlan(0); output += '总时长:' + plan.getDuration(true); //获取时间 output += '总路程:' + plan.getDistance(true); //获取距离 $('#result').css('display','block'); $('#result').html(output); }, }); var start=new BMapGL.Point(116.404844,39.911836); var end=new BMapGL.Point(116.308102,40.056057); transit.search(start, end);
步行路线规划
BMapGL.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。
1使用服务示例
代码如下:
var map = new BMapGL.Map("allmap"); map.enableScrollWheelZoom(); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}}); walking.search('西单', '慈云寺');