第1行: | 第1行: | ||
− | <div id="examples_api_center"><div class="title-hd">综合路线规划</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例在个性化地图基础上叠加了路况图层,展示了“驾车”、“步行”、“公交”三种类型的路线规划。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https:// | + | <div id="examples_api_center"><div class="title-hd">综合路线规划</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例在个性化地图基础上叠加了路况图层,展示了“驾车”、“步行”、“公交”三种类型的路线规划。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://bj.bcebos.com/v1/mapopen/api-demos/video/综合路线规划.mp4</pre> |
</div><div class="video-title1">综合路线规划示例</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | </div><div class="video-title1">综合路线规划示例</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | ||
{| width="370" border="1" | {| width="370" border="1" |
2020年10月9日 (五) 15:46的版本
综合路线规划
功能场景
该示例在个性化地图基础上叠加了路况图层,展示了“驾车”、“步行”、“公交”三种类型的路线规划。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/综合路线规划.mp4
综合路线规划示例
核心接口
类 | 接口 | 描述 | 参考文档 |
Map | map.setTrafficOn(); | 叠加路况 | 暂无 |
DrivingRoute | driving.search(startPoint, endPoint) | 驾车路线规划 | 暂无 |
WalkingRoute | walking.search(start, end) | 步行路线规划 | 暂无 |
TransitRoute | transit.search(startPoint, endPoint); | 公交路线规划 | 暂无 |
核心代码
map.setTrafficOn(); // 叠加路况 var configs = { start: '慈云寺', end: '百度大厦', checkTab: 0, // 出行方式 type: 0 // 路线种类 }; /** * 点击驾车搜索按钮 */ function drivingSearch() { map.clearOverlays(); var start = document.getElementById('srchstart').value; var end = document.getElementById('srchend').value; configs.start = start ? start : configs.start; configs.end = end ? end : configs.end; var geo = new BMapGL.Geocoder(); geo.getPoint(configs.start, function (point) { if (point) { configs.startPoint = point; } else { alert('起点输入不正确,请重新输入。'); } }); geo.getPoint(configs.end, function (point) { if (point) { configs.endPoint = point; } else { alert('终点输入不正确,请重新输入。'); } }); var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewPort: true } }); driving.search(configs.startPoint, configs.endPoint); // driving.setSearchCompleteCallback(function (rs) { // console.log(rs); // }); } /** * 步行路线 */ function walkingSearch() { map.clearOverlays(); var start = document.getElementById('srchstart').value; var end = document.getElementById('srchend').value; configs.start = start ? start : configs.start; configs.end = end ? end : configs.end; var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map, autoViewPort: true } }); walking.search(configs.start, configs.end); // walking.setSearchCompleteCallback(function (rs) { // console.log(rs); // }); } /** * 公交车路线 */ function busSearch() { map.clearOverlays(); var start = document.getElementById('srchstart').value; var end = document.getElementById('srchend').value; configs.start = start ? start : configs.start; configs.end = end ? end : configs.end; var geo = new BMapGL.Geocoder(); geo.getPoint(configs.start, function (point) { if (point) { configs.startPoint = point; } else { alert('起点输入不正确,请重新输入。'); } }); geo.getPoint(configs.end, function (point) { if (point) { configs.endPoint = point; } else { alert('终点输入不正确,请重新输入。'); } }); var transit = new BMapGL.TransitRoute(map, { renderOptions: { map: map, autoViewPort: true } }); transit.search(configs.startPoint, configs.endPoint); }
复制
深色
复制成功