Shulou(Shulou.com)06/02 Report--

This article mainly explains "Baidu Map API how to make driving navigation", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "Baidu Map API how to make driving navigation" bar!

First, create maps and web page styles

It takes only three sentences to create a simple map.

Varmap = newBMap.Map ("container"); / / create Map instance varpoint = newBMap.Point (116.404, 39.915); / / create point coordinates map.centerAndZoom (point,15); / / initialize the map, set the center point coordinates and map level.

Then, we make two input boxes, namely the starting point input box and the end input box.

From to

Use the Drive button to get the data in the input box.

FunctionmDriving () {varstartPlace = document.getElementById ("startInput"). Value;varendPlace = document.getElementById ("endInput") .value;}

Create a search instance

For the starting point and the end point, we need to create two different search instances:

/ / create 2 search instances varstartSearch = newBMap.LocalSearch (map,startOption); varendSearch = newBMap.LocalSearch (map,endOption)

After clicking the "driving" button, start searching for starting and ending points that match the keywords (POI point).

FunctionmDriving () {varstartPlace = document.getElementById ("startInput"). Value;varendPlace = document.getElementById ("endInput"). Value; startSearch.search (startPlace); endSearch.search (endPlace); document.getElementById ("box") .style.display = "block";}

3. Data interface for search

Since AJAX is loaded asynchronously, we use the callback function onSearchComplete provided by Baidu Map API to complete the operation after a successful search.

Take the search for the starting point as an example:

When the search is successful, list each search result (POI) in the panel in the way we customize it. In fact, here we only use the data interface, not Baidu default results panel.

VarstartOption = {onSearchComplete: function (results) {/ / determine whether the status is correct if (startSearch.getStatus () = = BMAP_STATUS_SUCCESS) {startResults = results;vars = []; for (vari = 0polii)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.