Baidu Map API How to use _javascript skills

If you want to use the Baidu Map API, first of all need to obtain a Baidu Map API key, and then introduced the Baidu Map API, Next, we detailed introduction to obtain, introduce API Key skills, as well as through the code to give you detailed explanation of Baidu Map API how to use, specific see below.

First of all, if you want to call the Baidu Map API, you need to obtain a Baidu Map API key.

Application key is very simple, in the Baidu Map API home page has related links, fill in the relevant information Baidu will give you a key.

Next, is the introduction of the Baidu Map API

The key code is as follows:

Copy Code code as follows:

<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false" > </script>

Then we can create a map and try it out. (JS code)

Copy Code code as follows:

var map = new Bmap.map ("container"); Create a Map instance
var point = new Bmap.point (120.391655,36.067588); Create point coordinates
Map.centerandzoom (Point, 15);
Map.centerandzoom ("Beijing", 15);
Map.centerandzoom ("Hongkong", 15);

here are three points to note:

1.map.centerandzoom method to create a map, the first parameter can be based on a previously created point as the center, create a map, or according to the Chinese name of the city area to create a map. (if spelled correctly, it can be created according to the English name of the city)

2. Map.centerandzoom the second parameter is the map zoom level, the maximum is 19, the minimum is 0. (But actually when it's reduced to 3 ... ）

3.bmap.map method A container is needed to create a map (the map is automatically adjusted according to the size of the container). ), fill in the ID of the related container.

About map Size:

Can pass

Copy Code code as follows:

Map.setzoom ();

method to actively control the map size level.

You can also set the

Copy Code code as follows:

Map.enablescrollwheelzoom (TRUE);

Use the mouse wheel to control size.

Baidu Map provides a very rich functional space altogether we use.

1.Control: The abstract base class for controls that inherit the methods and properties of this class. This class enables you to implement custom controls.

2.NavigationControl: Map translation Zoom control, PC side default located at the top left of the map, it contains the control map translation and scaling functions. The mobile side provides the zoom control, which is located at the bottom right of the map.

3.OverviewMapControl: Thumbnail map control, default located at the bottom right of the map, a collapsible thumbnail map.

4.ScaleControl: Scale control, default located at the lower left of the map, showing the proportional relationship of the map.

5.MapTypeControl: Map type control, default located at the top right of the map (map, satellite, three-dimensional).

6.CopyrightControl: Copyright control, the default is located at the bottom left of the map.

7.GeolocationControl: Positioning control, for mobile end development, the default is located at the bottom left of the map.

Effect chart

Copy Code code as follows:

Map.addcontrol (New Bmap.navigationcontrol ());//Zoom pan control
Map.addcontrol (New Bmap.scalecontrol ()); Scale
Map.addcontrol (New Bmap.overviewmapcontrol ());//thumbnail
Map.addcontrol (New Bmap.maptypecontrol ()); Map type
Map.setcurrentcity ("Qingdao");

Note: When you set up the city information, the Maptypecontrol switch function can be used

Map events:
Most of the objects in the Baidu map API contain AddEventListener methods that we can use to listen for object events.
Instance:

Copy Code code as follows:

Map.addeventlistener ("click", Function () {
Alert ("You clicked on the map.") ");
});

Event sniffing can be removed when we no longer want to listen for events. Each API object provides removeeventlistener to remove the event listener function.

Copy Code code as follows:

Map.removeeventlistener ("click", Functiona);
Map.addeventlistener ("click", Functiona);

Map cover:

Overlay: The abstract base class of the covering, all of which inherit the method of this class.

Marker: The callout represents the point on the map, and the icon of the callout can be customized.

Polyline: Represents a polyline on a map.

Polygon: Represents a polygon on a map. A polygon is similar to a closed polyline, and you can add a fill color to it.

Circle: Represents a circle on a map.

Infowindow: The information window is also a special kind of overlay, which can show richer text and multimedia information. Note: Only one information window can be opened on the map at the same time.

Callout Example:

var point = new Bmap.point (120.389472,36.072362);//By default, the icon class can be used to specify the custom icons
 var marker = new Bmap.marker (point);
 var label = new Bmap.label ("Qingdao municipal government", {offset:new bmap.size (20,-10)});//Callout Label 
 marker.setlabel (label)//Set Callout description
 Marker.enabledragging ()///callout can be dragged by
 Marker.addeventlistener ("Dragend", function (e) { 
  alert (e.point.lng + "," + E.point.lat);//print drag end coordinate 
 }); 
 Map.addoverlay (marker); 
 var point = new Bmap.point (120.387244,36.064835);
 var Myicon = new Bmap.icon ("Http://api.map.baidu.com/img/markers.png", new bmap.size);
 var marker2 = new Bmap.marker (point, {Icon:myicon}); 
 Map.addoverlay (marker2);
 var Infowindow = new Bmap.infowindow ("<p style= ' font-size:14px; ') > Details </p> "); Pop-up window
 marker2.addeventlistener ("click", Function () {
  This.openinfowindow (Infowindow); 
 });

The above description is the entire content of this article, I hope that the use of Baidu Map API help.