1. 程式人生 > >使用百度API實現實時公交站點查詢及地圖顯示

使用百度API實現實時公交站點查詢及地圖顯示

需求:當外部輸入公交站點名稱,點選查詢按鈕的時候,會在div上顯示所有包含此公交站點的公交線路號的列表,點選列表中的項,會在百度地圖上繪製出其線路。

實現:

第一步:生成經過此公交站點的所有線路列表

使用的百度API:服務類中LocalSearch類,用於進行位置搜尋、周邊搜尋和範圍搜尋。其提供search方法,返回LocalResult給回撥函式onSearchComplete。

查詢

document.getElementById('query').onclick = function () {
        map.clearOverlays();
        keyword01 = document.getElementById('keyword01').value + "公交車站";
        window.localStorage.setItem('keyword01', keyword01);
        new BMap.LocalSearch("杭州", {
            onSearchComplete: searchComplete
        }).search(keyword01);

        $("#keyword01").val("");
    };

LocalResult提供getCurrentNumPois()方法,返回當前頁的結果數,由於我們添加了公交車站keyword,所以應該(?)在第一頁就能找到此公交車站。getPoi(i)方法,返回LocalResultPoi物件,表示位置檢索的一個結果點。

LocalResultPoi物件的屬性type為列舉型別poiType,表示地點的型別,限制其為公交車站

function searchComplete(result) {
    var html = [];
    for (var i = 0; i < result.getCurrentNumPois(); i++) {
        var poi = result.getPoi(i);
        if (poi.type == BMAP_POI_TYPE_BUSSTOP) {
            var busNames = poi.address.split(';');
            for (i = 0; i < busNames.length; i++) {
                //獲得了所有的busName 把它寫到div中
                html.push('<li><a href="javascript:void(0)" onclick="subgo(\'' + busNames[i] + '\')">' +
                    busNames[i] +
                    '</a></li>');
            }
        } else {

        }
    }
    var l_result = document.getElementById("l-result");
    l_result.innerHTML = '<ul>' + html.join('') + '</ul>';
}

第二步:列表項點選事件

點選

function subgo(itemNo) {
    busNo01 = itemNo;
    window.localStorage.setItem("busNo01", busNo01);
    busutil.getBusList(busNo01);
}

第三步:列表項點選顯示具體的線路資訊

服務類中BusLineSearch類是公交線路搜尋類。構造其物件,呼叫其getBusList方法,由於busName已經是很詳細的線路名,所以在其回撥函式onGetBusListComplete中使用getBusLine(buslist.getBusListItem(curItemNo)只需要0和1

busutil = new BMap.BusLineSearch(map, {
        renderOptions: {panel: "itemResult"},
        onGetBusListComplete: function (buslist) {
            //考慮環線
            if (buslist.getBusListItem(curItemNo01) == undefined) {
                curItemNo01 = 0;
                window.localStorage.setItem('curItemNo01', curItemNo01);
            }
            busutil.getBusLine(buslist.getBusListItem(curItemNo01));
        }
    });

後面與公交地圖按線路查詢的步驟相同。參考:

使用百度API實現實時公交線路查詢及地圖顯示

實現效果:


相關推薦

使用API實現實時公交站點查詢地圖顯示

需求:當外部輸入公交站點名稱,點選查詢按鈕的時候,會在div上顯示所有包含此公交站點的公交線路號的列表,點選列表中的項,會在百度地圖上繪製出其線路。 實現: 第一步:生成經過此公交站點的所有線路列表 使用的百度API:服務類中LocalSearch類,用於進行位置搜尋、周

使用API實現實時公交站點查詢列表顯示

需求:當外部輸入公交站點名稱,點選查詢按鈕的時候,會在div上顯示所有包含此公交站點的公交線路號的列表,點選列表中的項,會繪製出其線路列表。 實現: 第一步:生成經過此公交站點的所有線路列表 第二步:列表項點選事件 第三步:列表項點選顯示具體的線路資訊 與公交地圖_按站點

使用API實現實時公交線路查詢地圖顯示

需求:當外部輸入公交線路號,點選查詢按鈕的時候,會在div上顯示所有包含此公交線路號的列表,點選列表中的項,會在百度地圖上繪製出其線路。 實現: 第一步:生成線路列表 使用的百度API:服務類中BusLineSearch類是公交線路搜尋類。 構造其物件,呼叫其getBus

python,使用api實現復制截圖中的文字

content nsh AD con 讀取 __name__ return IT now() 百度雲文字識別技術文檔: https://cloud.baidu.com/doc/OCR/OCR-Python-SDK.html#.E6.96.B0.E5.BB.BAAipOcr

Java呼叫API實現文字識別-羅紹崗-專題視訊課程

Java呼叫百度API實現文字識別—242人已學習 課程介紹         java呼叫百度AI文字識別SDK來實現一張圖片的文字資訊 課程收益     

Java呼叫API實現翻譯-羅紹崗-專題視訊課程

Java呼叫百度API實現翻譯—390人已學習 課程介紹         java呼叫百度API實現中英文翻譯 課程收益     此課程學習後可以反駁領悟

Java呼叫API實現翻譯

  教程地址 下面是Java呼叫百度API實現翻譯的具體步驟: 一、在寫程式碼之前先在在百度翻譯平臺中,申請APP_ID   申請地址申請的詳見 點選開啟連結 申請之後,會得到APP_ID和SECURITY_KEY 二、java程式碼如

python,使用api實現複製截圖中的文字

百度雲文字識別技術文件: from aip import AipOcr #百度aip from PIL import ImageGrab #處理剪下板圖片 from PIL import Image import PIL import keyboard #監控鍵盤

api實現框選,顯示框選區域內的資料,並且點選資料點顯示詳細資訊

下面我貼上所有原始碼,分享給大家,後臺資料隨便大家如何獲取1.開啟地圖,右上角是繪製多邊形的工具條。引用DrawingManager_min.js和DrawingManager_min.css即可2.選擇框選型別。框選區域,判斷點是否在多邊形中,大家可以參考百度提供的這個j

API實現地圖示點並測距

##index.html <!doctype html> <html> <head> <title>地圖示點</title> <meta http-equiv="content-t

呼叫鷹眼api實現實時軌跡繪製

自己想做一個跑步路徑軌跡記錄的app,剛好百度地圖有鷹眼api,就拿過來呼叫了,這裡給出鷹眼api呼叫的一個完整實現的例子HelloTrace,放在了完整包的下載連結為:http://download.csdn.net/detail/sinat_22013331/93230

java工具類 一 之服務端java實現根據地址從API獲取經緯度

服務端java實現根據地址從百度API獲取經緯度 程式碼:   package com.pb.baiduapi; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr

JS呼叫api介面——實現簡單的頁面

描述: JS呼叫百度api介面——實現簡單的百度頁面 效果: 實現: css檔案: @charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; list-style: none;

利用API查詢手機號歸屬地

利用百度Api查詢手機號歸屬地 開啟網址可以看到好幾個號碼歸屬地的查詢,有些是收費的,有些免費,如果呼叫不是特別頻繁,需要的資訊量不是特別多的話,免費的就足夠了。我開始看的是第一個介面:http://apistore.baidu.com/apiworks/

JAVA實現人臉識別,活體檢測之API

-----------------------8/16更新--------------------------- 有人問原始碼: 連結:https://pan.baidu.com/s/1WP37IBacu6VZwtNOUDbSYg 密碼:vdzm 在這 -------

基於API實現圖片文字識別功能(Java版)

1、登入百度AI開放平臺     (1)在頂部導航欄中,找到控制檯選項,並選擇文字識別功能,進入管理中心頁面        (2)在管理中心頁面中,找到建立應用按鈕並點選   (3)填寫應用名名稱和應用描述,選擇相應的應用型別,勾選自己需要的介面服

使用C#實現API【人臉檢測】V3版

第一次使用百度API  C#程式(測試用) 最近實現 首先閱讀文件 第一步:註冊百度賬號獲取Access TOKEN 新增應用 得到Secret Key 和API Key API Key 對應文件中的 clientId SecretKey

c#圖文識別之api調用

arr 範圍 demo1 識別 del null var jobject static //百度圖片識別api接口  public static JObject GeneralBasic(string apikey,string secretkey,string path)

基於實現微信服務號內文字語音互轉STT TTS

.com wid ech 設置 errcode creat ice 遍歷 組裝 先上效果圖: 使用百度語音識別和語音合成兩個接口實現 1.語音識別STT 用戶微信輸入,調用百度api,得到識別文本。 2.語音合成TTS 用戶輸入問題,調用百度api,得到mps音頻,使用開

Api完成在線地圖定位顯示

js 地址:http://lbsyun.baidu.com/jsdemo.htm#c1_3 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/