Home > Developer > JavaScript
Recently, Baidu map simulation data needs to obtain the coordinates of the sites along a bus line. It seems that Baidu does not have a ready-made API, so a simulation page, a tool, IE6/7/8 not supported
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> get bus station coordinates </title>
<Style type = "text/css">
Html, body {height: 100% ;}
# Results, # coordinate {display: inline-block; width: 45%; min-height: 200px; border: 1px solid # e4e4e4; vertical-align: top ;}
</Style>
<Script src = "http://api.map.baidu.com/api? V = 1.3 "type =" text/javascript "> </script>
</Head>
<Body>
<P> <label for = "busId"> bus routes: </label> <input type = "text" value = "521" id = "busId"/> <input type = "button" id = "btn-search" value =" query "/> </p>
<Div id = "results"> </div>
<Div id = "coordinate"> </div>
<Script type = "text/javascript">
(Function (){
Var tempVar;
Var busline = new BMap. BusLineSearch ('wuhan ',{
RenderOptions: {panel: "results "},
OnGetBusListComplete: function (result ){
If (result ){
TempVar = result; // The result does not contain coordinate information, so the getCoordinate function cannot be called here. By tracking variables, coordinates are added to Baidu's package only after onGetBusListComplete.
Busline. getBusLine (result. getBusListItem (0 ));
}
},
// There are four callbacks In the api documentation, except onGetBusListComplete and onBusLineHtmlSet, as well as onBusListHtmlSet and onGetBusLineComplete,
// After testing, the coordinates are added to tempVar only when the onBusLineHtmlSet step (line formatting is completed ).
// Therefore, the preceding busline. getBusLine (result. getBusListItem (0); is required. Otherwise, there is no way to obtain the coordinate list.
OnBusLineHtmlSet: function (){
Try {
GetCoordinate (tempVar );
} Catch (e ){
}
}
});
Function getCoordinate (result ){
Var coordinate = document. getElementById ("coordinate ");
Var stations = result ['0']. _ stations;
Var html = [];
Stations. forEach (function (item ){
Html. push ('<li>' + item. name + ''+ item. position. lng +'' + item. position. lat + '</li> ');
});
Coordinate. innerHTML = '<ul>' + html. join ('') + '</ul> ';
}
Document. getElementById ('btn-search'). onclick = function (){
Busline. getBusList (document. getElementById ("busId"). value );
}
})();
</Script>
</Body>
</Html>
Author: Xishan
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
