日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
百度地圖API之如何制作駕車導(dǎo)航

讓用戶自己選擇起點和終點呢？答案是，使用數(shù)據(jù)接口。數(shù)據(jù)接口，可以讓百度地圖API的數(shù)據(jù)，按照自定義的形式展示。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、臨湘網(wǎng)站維護、網(wǎng)站推廣。

　　這個功能非常實用，學(xué)會這個方法，可以讓您的地圖更加接近百度地圖的功能??！

　　一、創(chuàng)建地圖與網(wǎng)頁樣式

　　創(chuàng)建一張簡單的地圖，只需要3句話。

 
 
 
 
    
  
  
  
  
  1. 　　varmap =newBMap.Map("container"); //創(chuàng)建Map實例 
    2. 
  
  
  
  
  2. 　　varpoint =newBMap.Point(116.404, 39.915); //創(chuàng)建點坐標 
    3. 
  
  
  
  
  3. 　　map.centerAndZoom(point,15); //初始化地圖,設(shè)置中心點坐標和地圖級別。
    4.

　　然后，我們制作出兩個輸入框，分別是起點輸入框，和終點輸入框。

　　從到  

　　使用“駕車”按鈕，獲取輸入框中的數(shù)據(jù)。

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

二、創(chuàng)建搜索實例

　　對于起點和終點，我們需要創(chuàng)建2個不同的搜索實例：

 
 
 
 
    
  
  
  
  
  1. 　　//創(chuàng)建2個搜索實例 
    2. 
  
  
  
  
  2. 　　varstartSearch =newBMap.LocalSearch(map,startOption);varendSearch =newBMap.LocalSearch(map,endOption);
    3.

　　在點擊“駕車”按鈕后，開始搜索起點和終點都有哪些符合關(guān)鍵詞的地方（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.

　　三、搜索的數(shù)據(jù)接口

　　由于AJAX是異步加載的，我們使用百度地圖API提供的回調(diào)函數(shù)onSearchComplete，來完成對搜索成功后的操作。

以起點的搜索為例：

　　當(dāng)搜索成功后，把每一個搜索結(jié)果（POI），按照我們自定義的方式，列在面板中。其實，這里我們只使用了數(shù)據(jù)接口，沒用百度默認的結(jié)果面板。

 
 
 
 
    
  
  
  
  
  1. 　　varstartOption ={ 
    2. 
  
  
  
  
  2. 　　onSearchComplete: function(results){//判斷狀態(tài)是否正確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;}
  • 　　}
  • 　　};

    • 　　當(dāng)用戶鼠標移到起點面板的標題處，我們在地圖上打開一個信息窗口。里面放“選為起點”的按鈕。

     
 
 
 
      
  
  
  
  
    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.

    　　同理，制作終點的面板。這里需要注意的是，終點和起點不同，選擇終點之后，需要創(chuàng)建一個駕車實例，并且繪制出駕車路線。

    　　所以要做一個判斷，用戶是否已經(jīng)選擇了起點。如果沒有，提示用戶要先選擇起點。

     
 
 
 
      
  
  
  
  
    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.

    四、創(chuàng)建駕車實例和結(jié)果面板

    　　在選擇完畢確定的終點和起點后，駕車的結(jié)果就明了了。

    　　一句話，輕松搞定。

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

    五、頁面樣式完善

    　　為了讓頁面干凈好看，我們可以把不必要的結(jié)果展示暫時隱藏起來，當(dāng)需要它們的時候，再展開。

    　　1、比如，先把地圖和搜索框以外的結(jié)果面板隱藏起來。

    　　我使用了hidden樣式，來隱藏右邊的面板boxpanel。

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

    　　對起點選擇和終點選擇面板，采取使用時“展開”，選取完畢即刻隱藏的辦法。例如，

     
 
 
 
      
  
  
  
  
    1. 　　
      起點選擇 (展開)
      2.

    2、清除上次駕車查詢結(jié)果

    　　如果你要再次使用駕車查詢，一定要先清除上次駕車查詢的結(jié)果：driving.clearResults();

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

    　　另外，補充一個清除覆蓋物的知識：

    　　清除地圖上所有的標記，用map.clearOverlays();

    　　清除單個標注，用map.removeOverlay(marker);

    　　顯示和隱藏自定義覆蓋物，可以繼承overlay的hide();或者show()方法。

    　　附，全部源代碼：

     
 
 
 
      
  
  
  
  
    1. 　　
      2. 
  
  
  
  
    2. 　　
      3. 
  
  
  
  
    3. 　　
      4. 
  
  
  
  
    4. 　　
      5. 
  
  
  
  
    5. 　　指定起點與終點的駕車導(dǎo)航
      6. 
  
  
  
  
    6. 　　
      7. 
  
  
  
  
    7. 　　
      8. 
  
  
  
  
    8. 　　
      9. 
  
  
  
  
    9. 　　
      10. 
  
  
  
  
    10. 　　
      11. 
  
  
  
  
    11. 　　
      12. 
  
  
  
  
    12. 從到  
      13. 
  
  
  
  
    13. 　　
  • 　　
  • 　　
  • 　　
  • 　　
  • 　
  • 　　
    起點選擇 (展開)
  • 　　
  • 　　
    終點選擇 (展開)
  • 　　
  • 　　
    駕車導(dǎo)航
  • 　　
  • 　　
  • 　　
  • 　　
  • 　　
  • 　　

    • 網(wǎng)站欄目：百度地圖API之如何制作駕車導(dǎo)航
    網(wǎng)站鏈接：http://www.dlmjj.cn/article/dhdigii.html

    其他資訊