JS Baidu map navigation and js map navigation

JS Baidu map navigation and js map navigation

In the previous article, we simply learned about HTML5 geographic positioning. Today, I want to tell you a problem I encountered in the project, that is, how to click a button to adjust it to Baidu map, obtain your current location and navigate to the specified location.

If you do not want to check the steps, you can download them directly.Download DEMO

1. Get the coordinates of the destination

Open the Baidu map API and click "pick up coordinates.

Taking Chaoyang Park in Beijing as an example, the positioning is as follows:

116.488543, 39.949804 // This represents the longitude and latitude respectively.2. Baidu map bus, driving, walking navigation

The navigation interface is:

• Http://api.map.baidu.com/direction // PC & Webapp service address

For specific parameter problems, see API:

• Http://developer.baidu.com/map/wiki/index.php? Title = uri/api/web

Example

Http://api.map.baidu.com/direction? Origin = latlng: 34.264642646862, 108.95108518068 | name: My Home & destination = Wild Goose Pagoda & mode = driving & region = Xi'an & output = html & src = yourCompanyName | yourAppName

// Set up Baidu PC or Web map to show "Xi 'an" from (lat: 34.264642646862, lng: 108.95108518068) "My home" to "Big Wild Goose Pagoda"
Route.

What I want to do in the project is to get the current location, and then navigate to the specified project as follows:

<Script> var x = document. getElementById ("demo"); function getLocation () {if (navigator. geolocation) {navigator. geolocation. getCurrentPosition (showPosition);} else {x. innerHTML = "Geolocation is not supported by this browser. ";}} function showPosition (position) {x. innerHTML = "Latitude:" + position. coords. latitude + "<br/> longpolling:" + position. coords. longpolling; window. location. href = "http://api.map. Baidu.com/direction? Origin = latlng: "+ position. coords. latitude + "," + position. coords. longpolling + "| name: My Home & destination = & mode = driving & region = Guangzhou & output = html & src = yourCompanyName | yourAppName" ;}</script>

Obviously, we implement two steps.

Implementation Effect

Download DEMO