“综合路线规划”的版本间的差异

2020年10月9日 (五) 15:21的版本

综合路线规划

该示例在个性化地图基础上叠加了路况图层，展示了“驾车”、“步行”、“公交”三种类型的路线规划。

https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov

综合路线规划示例

核心接口

类	接口	描述	参考文档
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);
    }

复制

深色

复制成功

@@ 第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://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</pre>
+<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://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</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"
 |-
@@ 第9行： / 第9行： @@
 |-
 | Map
-| new BMapGL.Map('container')
+| map.setTrafficOn();
-| 创建GL版地图
+| 叠加路况
-| [[jspopularGL/guide/show|展示地图]]
+| 暂无
 |-
-| Map
+| DrivingRoute
-| setMapType(BMAP_EARTH_MAP)
+| driving.search(startPoint, endPoint)
-| 设置地图类型
+| 驾车路线规划
-| [[jspopularGL/guide/maptype|变更地图类型]]
+| 暂无
+|-
+| WalkingRoute
+| walking.search(start, end)
+| 步行路线规划
+| 暂无
+|-
+| TransitRoute
+| transit.search(startPoint, endPoint);
+| 公交路线规划
+| 暂无
 |}
-</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">  <div id="container"></div>
+</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">    map.setTrafficOn(); // 叠加路况
-  <ul class="drawing-panel" style="z-index: 99;">
+    var configs = {
-      <li class = "normal btn current" onclick = "changeMapType(this)">3D地图</li>
+        start: '慈云寺',
-      <li class = "earth btn" onclick = "changeMapType(this)">卫星地球</li>
+        end: '百度大厦',
-  </ul>
+        checkTab: 0, // 出行方式
+        type: 0 // 路线种类
+    };
+    /**
+     * 点击驾车搜索按钮
+    */
+    function drivingSearch() {
+        map.clearOverlays();
+        var start = document.getElementById('srchstart').value;
+        var end = document.getElementById('srchend').value;
+        configs.start = start&nbsp;? start&nbsp;: configs.start;
+        configs.end = end&nbsp;? end&nbsp;: 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&nbsp;? start&nbsp;: configs.start;
+        configs.end = end&nbsp;? end&nbsp;: 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);
+        // });
+    }
-  <script>
+    /**
-  var map = new BMapGL.Map('container');
+     * 公交车路线
-  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
+    */
-  map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放
+    function busSearch() {
-  map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件
+        map.clearOverlays();
-  function changeMapType(e) {
+        var start = document.getElementById('srchstart').value;
-      if (e.className.indexOf('current') === -1) {
+        var end = document.getElementById('srchend').value;
-          var allLi = document.getElementsByClassName('btn');
+        configs.start = start&nbsp;? start&nbsp;: configs.start;
-          for (var i = 0; i < allLi.length; i++) {
+        configs.end = end&nbsp;? end&nbsp;: configs.end;
-              allLi[i].className = allLi[i].className.replace(' current','').trim();
+        var geo = new BMapGL.Geocoder();
-          }
+        geo.getPoint(configs.start, function (point) {
-          e.className += ' current';
+            if (point) {
-          if (e.className.indexOf('normal')&nbsp;!= -1) {
+                configs.startPoint = point;
-              map.setMapType(BMAP_NORMAL_MAP);
+            } else {
-          } else {
+                alert('起点输入不正确，请重新输入。');
-              map.setMapType(BMAP_EARTH_MAP);
+            }
-          }
+        });
-      }
+        geo.getPoint(configs.end, function (point) {
-  }
+            if (point) {
-  </script>
+                configs.endPoint = point;
+            } else {
+                alert('终点输入不正确，请重新输入。');
+            }
+        });
+        var transit = new BMapGL.TransitRoute(map, {
+            renderOptions: {
+                map: map,
+                autoViewPort: true
+            }
+        });
+        transit.search(configs.startPoint, configs.endPoint);
+    }
                  </pre>
 <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div>

文档全面上新

2020年10月9日 (五) 15:21的版本