Need to rent a house in a new place or buy a house, an important consideration is whether the traffic is convenient, I rent the house when I would like to know from the bus station around me, can not transfer to where, I had this demand after the Internet search, and did not find similar features, and the trouble is, Baidu map the most basic API also does not show the interface of multiple lines at the same time, so only with the help of Baidu map overlay to draw polylines, more trouble. So with the Baidu map of the API simple implementation of a. As follows:
For an online demo, please click on this link. Simply say the function. Specify the bus station name and city name on the left, click on the query after the list of places matching the search criteria and after the bus line (including subway) introduction, click on an item, the right map to locate the bus station, and a random color to indicate the bus line through the bus station, click the station along the route, The name of the station and the list of buses passing through the station are displayed in the popup window.
Here is my implementation of the process, first of all, HTML simple to write the above layout (this is the simplest layout, my demo link inside with bootstrap landscaping):
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <styletype= "Text/css">Body, HTML{width:100%;Height:100%;margin:0;font-family:"Microsoft Jas Black";}#l-map{Height:500px;width:75%;float: Left;} </style> <Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=2.0&ak= Application key at Baidu Developer Center"></Script> <title>Bus/Metro line enquiry</title></Head><Body> <Divstyle= "float:left;width:25%;d isplay:inline;"> <DivID= "R-query">Please enter the bus station name, such as: "Xidan":<BR/> <inputtype= "text"ID= "keyword"value= "Xidan"/><BR/>Please enter the city name, such as Beijing (for reference only, such as Search Springs Square, Beijing does not have this address, the same will find Jinan, but if Beijing also has, will not find Jinan):<BR/> <inputtype= "text"ID= "Location"value= "Beijing"/><ButtonID= "Query">Inquire</Button> </Div> <DivID= "L-result"></Div> </Div> <DivID= "L-map"></Div></Body></HTML>
This step is the most important to apply for a Baidu Developer Center key, the application address in: Http://developer.baidu.com/map/index.php?title=jspopular, through the left "get the key" to apply for key.
Here is the JS code, first I define a few global variables:
varMap =NewBmap.map ("L-map");varBusstationicon =NewBmap.icon ("Busstation_marker.png",NewBmap.size (10,10));varBusstationhover =NewBmap.icon ("Busstation_marker_hover.png",NewBmap.size (10,10));varInfowindow =NewBmap.infowindow ("");varCurrentlocation;map.centerandzoom (NewBmap.point (116.404, 39.915), 15); Map.enablescrollwheelzoom ();varActivepolyline;//Hover bus LinevarStationlist = Array ();//Hover bus Line stationsvarCurrentpolyline;//hovered Origin line
Map is an object, when the mouse over a bus line, the line turns blue, and shows the route along the station, Activepolyline is the Blue Line, in the active state of the line along the way the information exists stationlist, Along the way each station usually uses the Busstationicon logo, the mouse slips over when uses the Busstationhover, clicks this icon to pop up the information window Infowindow to display the station name and passes through its bus line.
I do not use other JS library, is the original JS to write, first of all click the Query button after the response event:
document.getElementById (' query '). onclick=function() { map.clearoverlays (); document.getElementById ("L-result"). InnerHTML = ""; New Bmap.localsearch (document.getElementById (' Location '). Value, { onsearchcomplete:searchcomplete }). Search (document.getElementById (' keyword '). value);};The first step is to clear all the overlay on the map, this is to consider the time to click on the query to the previous map to clear the results of the query, the second step is to display the panel to match the condition site empty, that is, the left panel in the example diagram is emptied, the third step is to initiate a localsearch request, The first parameter is the search scope, which is the "Beijing" in the example, and the second option parameter, which specifies the callback function searchcomplete after the result is returned:
functionSearchcomplete (Result) { varResultpanel = document.getElementById ("L-result"); for(vari = 0; I < Result.getcurrentnumpois (); i++) { varPOI =Result.getpoi (i); if(Poi.type = =bmap_poi_type_normal) { Continue; } varlink = document.createelement (' A '); Link.setattribute (' href ', ' javascript:void (0) '); Link.poi=poi; Link.onclick=function() {map.clearoverlays (); Currentlocation= This. poi.province; varMarker =NewBmap.marker ( This. Poi.point); Map.addoverlay (marker); Map.panto ( This. Poi.point); varBusnames = This. Poi.address.split ('; ')); for(i = 0; i < busnames.length; i++) {busutil.getbuslist (busnames[i]); } }; Link.innertext= Poi.title + "(" + Poi.province + "):" + Poi.tags + ":" +poi.address; Resultpanel.appendchild (link); Resultpanel.appendchild (Document.createelement (' BR ')); }}
Traverse the search results, because there may be more than one station to search Xidan, there may also be Xidan East station West station South station North station, for each of the result items that meet the public transport conditions, to create a label, to meet the conditions, refers to this query result represents a bus station or subway station, if it is a common location bmap_poi_ Type_normal, the condition is not met. Give this a tag a poi attribute, record the location information that you represent, when the link is clicked, empty the map overlay, create a marker at the station location, for the bus or subway station, the Address property is a semicolon separated list of buses, According to this list to query each bus line information, and finally give this a tag to display the text, I show here is the location name + province + Location tag + bus information.
Here is more important is Busutil query bus line implementation, Baidu map of the Buslinesearch object has two methods, a called getbuslist, its parameters is a bus line name, such as 333 Road, return to match the bus, including upstream and downstream, etc. Another method called Getbusline, whose parameter is an Buslistitem object, which is one of the getbuslist results, looks at the implementation of this method:
varBusutil =NewBmap.buslinesearch (map,{Ongetbuslistcomplete:function(buslist) {busutil.getbusline (Buslist.getbuslistitem (0)); }, Ongetbuslinecomplete:function(busline) {varcolor = "#" + Math.floor (math.random () * 65535 *). toString (16); varPolyline =NewBmap.polyline (Busline.getpath (), {strokecolor:color, strokeweight:5, strokeopacity:0.7}); Map.addoverlay (polyline); if(IsMobile ()) {Polyline.addeventlistener ("Click",function(evt) {showpolyline (evt, polyline, busline); }); } Else{Polyline.addeventlistener ("MouseOver",function(evt) {showpolyline (evt, polyline, busline); }); } }});
The first is to get a list of bus callback function, such as I search 333 road, may get two bus, respectively, 333 uplink and 333 downlink line, here directly take the first item of the list to get the line details (getbusline), see here may have doubt, in case there is a "333 Road special Line" What to do, here to explain, I this code is not rigorous, assuming that all the search will not be ambiguous. The second function, Ongetbuslinecomplete, is to obtain a callback method after the details of a line, first to randomly generate a color for this line (not perfect here, there may be a very light color line), based on the line details of the bus site list to create a polyline. Here I made a judgment, if the non-mobile device, when the mouse over a certain line to activate the line, activating the status of the line to Blue, and show the site along the way. There is no mouse over the mobile device events, so with the Click event to trigger, but very strange, really on the mobile device, when the mouse click invalid, the problem I do not know why, if you find the problem welcome correction!
about how to move the mouse over the line activation how to achieve, I did not modify the original line, but on the line above the new one covered:
functionshowpolyline (evt, polyline, busline) {if(Evt.target = =currentpolyline) { return; } currentpolyline=polyline; Map.removeoverlay (Activepolyline); Removecircles (); Activepolyline=NewBmap.polyline (Busline.getpath (), {strokecolor: "#3333FF", Strokeweight:5, strokeopacity:0.9}); Map.addoverlay (Activepolyline); for(vari = 0; I < busline.getnumbusstations (); i++) { varBusstation =busline.getbusstation (i); Addcircle (busline, busstation); }}
First of all, if you want to activate the line is already active, then do nothing, otherwise the original Blue line deleted, and based on the line has just been slid to create a new polyline, and the various sites as marker added to the activation line, how to add marker code I will not paste, Look at when the marker was clicked, we know that there is a station is not enough, we must know which way bus, it is best to know that there is no familiar with the bus also passed here:
Marker.addeventlistener ("click",function() {Infowindow.settitle (Busstation.name+ "(" + Busline.name + ")"); Infowindow.setcontent (""); Marker.openinfowindow (Infowindow); NewBmap.localsearch (currentlocation, {onsearchcomplete:function(Result) {varpoi; for(vari = 0; I < Result.getcurrentnumpois (); i++) {POI=Result.getpoi (i); if(Poi.type! = Bmap_poi_type_normal && Poi.title = =busstation.name) {infowindow.setcontent (poi.address); Break; }}). Search (busstation.name);});
When a bus station is clicked, the first pop-up information window, the current activation of which is the public bus display, at the same time launched a query request, check out what bus passes here, here is also the assumption that the first item of the list must be accurate, that is, if I search "chrysanthemum garden", the first result item is definitely "Chrysanthemum garden" Instead of "Chrysanthemum Park East Station", then all the buses passing through here show up.
This function is completed, there is a bug in the place, you are welcome to correct me!
"Baidu Map" shows all bus routes departing from a site
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
