Methods and steps to access Baidu Maps API with JavaScript

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=your key"></script>

var map = new BMapGL.Map("container"); // Create a map instance var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates by latitude and longitude of geographic location map.centerAndZoom(point, 15); // Initialize the map, set the center point coordinates and map level

map.centerAndZoom(point, 15); // Initialize the map, set the center point coordinates and map levelmap.enableScrollWheelZoom(true); // Enable mouse wheel zoommap.setMapType(BMAP_EARTH_MAP); // Set the map type to earth mode

var scaleCtrl = new BMapGL.ScaleControl(); // Add scale controlmap.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // Add zoom controlmap.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // Add city list controlmap.addControl(cityCtrl);
var locationControl = new BMapGL.LocationControl(); // Add positioning controlmap.addControl(locationControl);

 //Get the current geographic location and move the center of the map to the positioning location var geolocation = new BMapGL.Geolocation(); //Create a positioning object geolocation.getCurrentPosition(function (r) { //Call the positioning function through the positioning object, the callback function parameter r represents the positioning result if (this.getStatus() == BMAP_STATUS_SUCCESS) { //If the positioning is successful var mk = new BMapGL.Marker(r.point); //Create a marker, r is the positioning result, r.point is the current positioning location map.addOverlay(mk); //Add the marker object to the map map.panTo(r.point); //Move the map center to the positioning location // alert('Your location: ' + r.point.lng + ',' + r.point.lat);
  }
  else {
    alert('failed' + this.getStatus());
  }
});

  //Add click event to the mapmap.addEventListener("click",function(e){
  //Parameter name e map click event source //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng); //Create a marker, r is the positioning result, r.point is the current positioning location map.addOverlay(mk); //Add the marker object to the map })

 //Add click event to the mapmap.addEventListener("click",function(e){
  //Parameter name e map click event source //console.log(e.latlng.lng+","+e.latlng.lat);
  var mk = new BMapGL.Marker(e.latlng);//Create a marker, r is the positioning result, r.point is the current positioning locationmk.addEventListener("click",function(){//Add a click event to the markerconsole.log(this);//this refers to the marker//Because the marker is a subtag of the map object map, when we click the marker, bubbles will appear and the click event of the map will also be triggered//You can use the stopPropagation function of the event source object to organize subsequent event bubblesevent.stopPropagation();
  });
  map.addOverlay(mk); //Add the marker object to the map})

//Add information window (encapsulated function)
function addInfoWindow(content,point,width,height,title) {
  //Required parameters content and point
  //content can be either text or a label //point is the latitude and longitude of a geographic location //The following three parameters are optional var opts = {
    width: width, // information window width height: height, // information window height title: title // information window title}
  var infoWindow = new BMapGL.InfoWindow(content, opts); // Create information window object map.openInfoWindow(infoWindow, point); // Open the information window }

//Driving route planning object //This object must be created after the map is loaded. It is usually placed after the map object map is created. And a web page should only be created once, otherwise the last planned path will not be cleared. driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
//Use the path planning object to find the route driving.clearResults(); //Clear the last planned path from the map driving.search(startPoint, endPoint); //Start path planning, pass in the start point and end point

//Bus route planning object //The creation of bus route planning object must be done after the map is loaded. It is usually placed after the map object map is created. And a web page should only be created once, otherwise the last planned route will not be cleared. transit = new BMapGL.TransitRoute(map, {
  renderOptions: { map: map },
  onSearchComplete: function (results) {
    if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
      return;
    }
    //alert(results.getNumPlans());//Get the total number of bus planning schemes//Design the html template for bus route planning display here var output = '';
    for(var i=0;i<results.getNumPlans();i++){
      var plan = results.getPlan(i);
      output +='<div style="margin-top:5px; background-color:#CCC"><p>Total duration:'+plan.getDuration(true)+'</p>';//Get timeoutput += '<p>Total distance:'+plan.getDistance(true)+'</p>'; //Get distanceoutput +=plan.getDescription(true)+"</div>";
    }
    $('#result').css('display', 'block'); //#result is a div we defined ourselves. We hide it by absolute positioning. The path planning is successfully displayed. $('#result').html(output); // Put the assembled path planning HTML tag template into the #result div to display it. },
});
transit.clearResults(); // Clear the last planned route transit.search(startPoint, endPoint); // Bus route planning

// Create a geocoding instance var myGeo = new BMapGL.Geocoder();      
// Get the address description based on the coordinates myGeo.getLocation(longitude and latitude coordinates, function(result){
    //funcation is a callback function that is executed only after specific geographic information is found if (result){      
      alert(result.address);      
    }      
});

//Create an address parser instance var myGeo = new BMapGL.Geocoder();
// Display the address resolution result on the map and adjust the map view myGeo.getPoint(address string (Hongqihegou, Chongqing), function(point){
    if(point){
        //point is the latitude and longitude point}else{
        alert('The address you selected did not resolve to any result!');
    }
}, optional parameter) //Optional parameter to pass in the city name. If not passed, search globally. Pass in the city name and search only in this city.