How to use Baidu map api_javascript skills-JS Tutorial-php.cn

How to use Baidu map api_javascript skills

WBOY

Release： 2016-05-16 15:47:34

Original

1997 people have browsed it

If you want to use the Baidu Map API, you first need to obtain a Baidu Map API key, and then introduce the Baidu Map API. Next, we will introduce in detail the techniques for obtaining and introducing the API key, and provide you with the code For a detailed explanation of how to use Baidu Maps API, please see below.

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

Applying for a key is very simple. There are relevant links on the homepage of Baidu Maps API. Fill in the relevant information and Baidu will give you a key.

The next step is to introduce Baidu Maps API

The key code is as follows:

Copy code The code is as follows:

Next we can create a map and try it out. (Js code)

Copy code The code is 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);

Three points need to be explained here: 1.map.centerAndZoom method creates a map. The first parameter can be to create a map based on a previously created point as the center, or to create a map based on the Chinese name of a city area. (If spelled correctly, it can be created based on the English name of the city)

2. The second parameter of map.centerAndZoom is the map zoom level, the maximum is 19 and the minimum is 0. (But actually when it is reduced to 3...)

3. The BMap.Map method requires a container when creating a map (the map will automatically adjust according to the size of the container.), fill in the id of the relevant container.

About map size:

Can be passed

Copy code The code is as follows:

map.setZoom();

Method actively controls the map size level.

You can also set it

Copy code The code is as follows:

map.enableScrollWheelZoom(true);

Use the mouse wheel to control size.

Baidu Map provides a very rich functional space for us to use.

1.Control: The abstract base class of the control. All controls inherit the methods and properties of this class. This class allows you to implement custom controls.

2.NavigationControl: Map pan and zoom control, which is located in the upper left corner of the map by default on PC. It includes the function of controlling the pan and zoom of the map. The mobile version provides a zoom control, which is located at the bottom right of the map by default.

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

4.ScaleControl: Scale control, located at the bottom left of the map by default, displays the scale relationship of the map.

5.MapTypeControl: Map type control, located in the upper right corner of the map by default (map, satellite, 3D).

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

7.GeolocationControl: Positioning control, developed for mobile terminals, located at the bottom left of the map by default.

Rendering

Copy code The code is as follows:

map.addControl(new BMap.NavigationControl());//Zoom and 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: The switching function of MapTypeControl is only available when city information is set

Map event:
Most objects in the Baidu Map API contain the addEventListener method, through which we can listen to object events.
Example:

Copy code The code is as follows:

map.addEventListener("click", function(){ 

alert("You clicked on the map."); 

});

When we no longer want to listen to events, we can remove the event listener. Each API object provides removeEventListener to remove event listening functions.

Copy code The code is as follows:

map.removeEventListener("click", functionA);

map.addEventListener("click", functionA);

Map cover:

Overlay: The abstract base class of overlays. All overlays inherit the methods of this class.

Marker: Marker represents a point on the map, and the mark icon can be customized.

Label: Represents a text label on the map. You can customize the text content of the label.

Polyline: Represents a polyline on the map.

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

Circle: Represents a circle on the map.

InfoWindow: The information window is also a special overlay that can display richer text and multimedia information. Note: Only one information window can be open on the map at the same time.

Annotation example:

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 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(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

Copy after login

The above description is the entire content of this article. I hope it will be helpful to everyone using Baidu Map API.