×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

百度地图API之如何制作驾车导航

让用户自己选择起点和终点呢？答案是，使用数据接口。数据接口，可以让百度地图API的数据，按照自定义的形式展示。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、临湘网站维护、网站推广。

　　这个功能非常实用，学会这个方法，可以让您的地图更加接近百度地图的功能！！

　　一、创建地图与网页样式

　　创建一张简单的地图，只需要3句话。

 
 
 
 
    
  
  
  
  
  1. 　　varmap =newBMap.Map("container"); //创建Map实例 
    2. 
  
  
  
  
  2. 　　varpoint =newBMap.Point(116.404, 39.915); //创建点坐标 
    3. 
  
  
  
  
  3. 　　map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。
    4.

　　然后，我们制作出两个输入框，分别是起点输入框，和终点输入框。

　　从到  

　　使用“驾车”按钮，获取输入框中的数据。

 
 
 
 
    
  
  
  
  
  1. 　　functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value;}
    2.

二、创建搜索实例

　　对于起点和终点，我们需要创建2个不同的搜索实例：

 
 
 
 
    
  
  
  
  
  1. 　　//创建2个搜索实例 
    2. 
  
  
  
  
  2. 　　varstartSearch =newBMap.LocalSearch(map,startOption);varendSearch =newBMap.LocalSearch(map,endOption);
    3.

　　在点击“驾车”按钮后，开始搜索起点和终点都有哪些符合关键词的地方（POI点）。

 
 
 
 
    
  
  
  
  
  1. 　　functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value; 
    2. 
  
  
  
  
  2. 　　startSearch.search(startPlace); 
    3. 
  
  
  
  
  3. 　　endSearch.search(endPlace); 
    4. 
  
  
  
  
  4. 　　document.getElementById("box").style.display="block"; 
    5. 
  
  
  
  
  5. 　　}
    6.

　　三、搜索的数据接口

　　由于AJAX是异步加载的，我们使用百度地图API提供的回调函数onSearchComplete，来完成对搜索成功后的操作。

以起点的搜索为例：

　　当搜索成功后，把每一个搜索结果（POI），按照我们自定义的方式，列在面板中。其实，这里我们只使用了数据接口，没用百度默认的结果面板。

 
 
 
 
    
  
  
  
  
  1. 　　varstartOption ={ 
    2. 
  
  
  
  
  2. 　　onSearchComplete: function(results){//判断状态是否正确if(startSearch.getStatus() ==BMAP_STATUS_SUCCESS){ 
    3. 
  
  
  
  
  3. 　　startResults =results;vars =[];for(vari =0;i 
  
  
  
  
  4. 　　s.push("
    "); 
    5. 
  
  
  
  
  5. 　　s.push(results.getPoi(i).title); 
    6. 
  
  
  
  
  6. 　　s.push("
    "); 
    7. 
  
  
  
  
  7. 　　s.push(results.getPoi(i).address); 
    8. 
  
  
  
  
  8. 　　s.push("
");
  • 　　}
  • 　　document.getElementById("startPanel").innerHTML =s.join("");
  • 　　}else{startResults =null;}
  • 　　}
  • 　　};

    • 　　当用户鼠标移到起点面板的标题处，我们在地图上打开一个信息窗口。里面放“选为起点”的按钮。

     
 
 
 
      
  
  
  
  
    1. 　　varstartInfowin =newBMap.InfoWindow("
      ");
      2.

    　　用户点击“选为起点”的按钮后，选定该点为起点，并隐藏起点面板，让用户选择终点。

    　　为了方便看清起点的位置，我们需要在地图上打个红色的标注。并且，再次选择起点时，要清楚上一次的标注。

     
 
 
 
      
  
  
  
  
    1. 　　functionstartDeter(){ 
      2. 
  
  
  
  
    2. 　　map.clearOverlays(); 
      3. 
  
  
  
  
    3. 　　startPoint =startInfowin.getPosition();varmarker =newBMap.Marker(startPoint); 
      4. 
  
  
  
  
    4. 　　map.addOverlay(marker); 
      5. 
  
  
  
  
    5. 　　document.getElementById("startPanel").style.display="none"; 
      6. 
  
  
  
  
    6. 　　}
      7.

    　　同理，制作终点的面板。这里需要注意的是，终点和起点不同，选择终点之后，需要创建一个驾车实例，并且绘制出驾车路线。

    　　所以要做一个判断，用户是否已经选择了起点。如果没有，提示用户要先选择起点。

     
 
 
 
      
  
  
  
  
    1. 　　functionendDeter(){ if(startPoint==null){alert("请先选择起点！");}else{ 
      2. 
  
  
  
  
    2. 　　endPoint =endInfowin.getPosition(); 
      3. 
  
  
  
  
    3. 　　driving.search(startPoint,endPoint); 
      4. 
  
  
  
  
    4. 　　document.getElementById("endPanel").style.display="none"; 
      5. 
  
  
  
  
    5. 　　} 
      6. 
  
  
  
  
    6. 　　}
      7.

    四、创建驾车实例和结果面板

    　　在选择完毕确定的终点和起点后，驾车的结果就明了了。

    　　一句话，轻松搞定。

    　　vardriving =newBMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});

    五、页面样式完善

    　　为了让页面干净好看，我们可以把不必要的结果展示暂时隐藏起来，当需要它们的时候，再展开。

    　　1、比如，先把地图和搜索框以外的结果面板隐藏起来。

    　　我使用了hidden样式，来隐藏右边的面板boxpanel。

     
 
 
 
      
  
  
  
  
    1. 　　.hidden{display:none;} 
      2. 
  
  
  
  
    2. 　　中间省略

    　　对起点选择和终点选择面板，采取使用时“展开”，选取完毕即刻隐藏的办法。例如，

     
 
 
 
      
  
  
  
  
    1. 　　
      起点选择 (展开)
      2.

    2、清除上次驾车查询结果

    　　如果你要再次使用驾车查询，一定要先清除上次驾车查询的结果：driving.clearResults();

    　　也可以使用clearOverlays,一次性清除地图上所有的覆盖物。map.clearOverlays();

    　　另外，补充一个清除覆盖物的知识：

    　　清除地图上所有的标记，用map.clearOverlays();

    　　清除单个标注，用map.removeOverlay(marker);

    　　显示和隐藏自定义覆盖物，可以继承overlay的hide();或者show()方法。

    　　附，全部源代码：

     
 
 
 
      
  
  
  
  
    1. 　　
      2. 
  
  
  
  
    2. 　　
      3. 
  
  
  
  
    3. 　　
      4. 
  
  
  
  
    4. 　　
      5. 
  
  
  
  
    5. 　　指定起点与终点的驾车导航
      6. 
  
  
  
  
    6. 　　
      7. 
  
  
  
  
    7. 　　
      8. 
  
  
  
  
    8. 　　
      9. 
  
  
  
  
    9. 　　
      10. 
  
  
  
  
    10. 　　
      11. 
  
  
  
  
    11. 　　
      12. 
  
  
  
  
    12. 从到  
      13. 
  
  
  
  
    13. 　　
      14. 
  
  
  
  
    14. 　　
      15. 
  
  
  
  
    15. 　　
      16. 
  
  
  
  
    16. 　　
      17. 
  
  
  
  
    17. 　　
      18. 
  
  
  
  
    18. 　
      19. 
  
  
  
  
    19. 　　
      起点选择 (展开)
      20. 
  
  
  
  
    20. 　　
      21. 
  
  
  
  
    21. 　　
      终点选择 (展开)
      22. 
  
  
  
  
    22. 　　
      23. 
  
  
  
  
    23. 　　
      驾车导航
      24. 
  
  
  
  
    24. 　　
      25. 
  
  
  
  
    25. 　　
      26. 
  
  
  
  
    26. 　　
      27. 
  
  
  
  
    27. 　　
      28. 
  
  
  
  
    28. 　　
      29. 
  
  
  
  
    29. 　　
      30. 
  
  
  
  
    30. 　　varmap =newBMap.Map("container"); //创建Map实例 
      31. 
  
  
  
  
    31. 　varpoint =newBMap.Point(116.404, 39.915); //创建点坐标 
      32. 
  
  
  
  
    32. 　　map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。 
      33. 
  
  
  
  
    33. 　　varstartInfowin =newBMap.InfoWindow("
      ");varendInfowin =newBMap.InfoWindow("
      ");varstartResults =null;varendResults =null;varstartPoint;varendPoint;vardriving =newBMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});varstartOption ={ 
      34. 
  
  
  
  
    34. 　　onSearchComplete: function(results){//判断状态是否正确if(startSearch.getStatus() ==BMAP_STATUS_SUCCESS){ 
      35. 
  
  
  
  
    35. 　　startResults =results;vars =[];for(vari =0;i 
  
  
  
  
    36. 　　s.push("
      "); 
      37. 
  
  
  
  
    37. 　　s.push(results.getPoi(i).title); 
      38. 
  
  
  
  
    38. 　　s.push("
      "); 
      39. 
  
  
  
  
    39. 　　s.push(results.getPoi(i).address); 
      40. 
  
  
  
  
    40. 　　s.push("
      "); 
      41. 
  
  
  
  
    41. 　　} 
      42. 
  
  
  
  
    42. 　　document.getElementById("startPanel").innerHTML =s.join(""); 
      43. 
  
  
  
  
    43. 　　}else{startResults =null;} 
      44. 
  
  
  
  
    44. 　　} 
      45. 
  
  
  
  
    45. 　　};varendOption ={ 
      46. 
  
  
  
  
    46. 　　onSearchComplete: function(results){//判断状态是否正确if(endSearch.getStatus() ==BMAP_STATUS_SUCCESS){ 
      47. 
  
  
  
  
    47. 　　endResults =results;vars =[];for(vari =0;i 
  
  
  
  
    48. 　　s.push("
      "); 
      49. 
  
  
  
  
    49. 　　s.push(results.getPoi(i).title); 
      50. 
  
  
  
  
    50. 　　s.push("
      "); 
      51. 
  
  
  
  
    51. 　　s.push(results.getPoi(i).address); 
      52. 
  
  
  
  
    52. 　　s.push("
      "); 
      53. 
  
  
  
  
    53. 　　} 
      54. 
  
  
  
  
    54. 　　document.getElementById("endPanel").innerHTML =s.join(""); 
      55. 
  
  
  
  
    55. 　　}else{endResults =null;} 
      56. 
  
  
  
  
    56. 　　} 
      57. 
  
  
  
  
    57. 　　};//创建2个搜索实例 
      58. 
  
  
  
  
    58. 　　varstartSearch =newBMap.LocalSearch(map,startOption);varendSearch =newBMap.LocalSearch(map,endOption);functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value; 
      59. 
  
  
  
  
    59. 　　startSearch.search(startPlace); 
      60. 
  
  
  
  
    60. 　　endSearch.search(endPlace); 
      61. 
  
  
  
  
    61. 　　document.getElementById("box").style.display="block"; 
      62. 
  
  
  
  
    62. 　　}functionstartDeter(){ 
      63. 
  
  
  
  
    63. 　　map.clearOverlays(); 
      64. 
  
  
  
  
    64. 　　startPoint =startInfowin.getPosition();varmarker =newBMap.Marker(startPoint); 
      65. 
  
  
  
  
    65. 　　map.addOverlay(marker); 
      66. 
  
  
  
  
    66. 　　document.getElementById("startPanel").style.display="none"; 
      67. 
  
  
  
  
    67. 　　}functionendDeter(){ if(startPoint==null){alert("请先选择起点！");}else{ 
      68. 
  
  
  
  
    68. 　　endPoint =endInfowin.getPosition(); 
      69. 
  
  
  
  
    69. 　　driving.search(startPoint,endPoint); 
      70. 
  
  
  
  
    70. 　　document.getElementById("endPanel").style.display="none"; 
      71. 
  
  
  
  
    71. 　　} 
      72. 
  
  
  
  
    72. 　　}
      73.

    网页标题：百度地图API之如何制作驾车导航
    文章来源：http://cdbrznjsb.com/article/dhdigii.html

    其他资讯

    让你的专属顾问为你服务