Baidu Map API uses

1. Introductory program (1) Introduction of Baidu Map javascrpt file (HTTP path access Baidu Map API website)

<script src="http://api.map.baidu.com/api?v=1.5&ak=密钥" type="text/javascript"></script>

(2) write the HTML code (Baidu map will set the content of the div according to the ID):

<div id=" myMap " style="width:500px;height:320px"></div>

(3) Calling API initialization map

//根据div的id= map的map构建地图内存对象。//BMap是百度地图类，封装了显示百度地图的方法和属性，参数为容器所对应的idvar map = new BMap.Map("myMap");map.enableScrollWheelZoom();//启用滚轮放大缩小

Zoom level Introduction Diagram:

Zoom level Introduction Diagram

(4) Build the center point position of the area to be displayed on the map 121.491, 31.233 can be understood as the horizontal and vertical axis, longitude latitude

point = new BMap.Point(121.491, 31.233);// 显示地图，并设定地图等级map.centerAndZoom(point, 3); //缩放等级

2. Controls:

The UI element on the Baidu map that interacts with the map is called a control. Rich controls are available in the Baidu Map API, and you can also implement custom controls by using the control class.

A. The controls provided in the Map API:

• Control: All controls inherit methods, properties of this class. This class enables you to implement a custom control.
• Navigationcontrol: The map Pan zoom control, which defaults to the top left side of the map, contains the ability to control the panning and zooming of the map. The mobile side provides a zoom control, which is located by default in the lower right of the map.
• Overviewmapcontrol: The thumbnail map control, which is located at the bottom right of the map by default, is a collapsible thumbnail map.
• Maptypecontrol: The map type control, which is located at the top right of the map by default.
• Copyrightcontrol: Copyright control, which is located at the bottom left of the map by default.
• Geolocationcontrol: Positioning controls, developed for mobile, default at the bottom left of the map

B. Introduction of CONTROLS:

var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.addControl(new BMap.NavigationControl());

You can add multiple controls to a map. In this example, we add a pan zoom control, a scale bar control, and a thumbnail control to the map. When you add controls to your map, they take effect immediately.

map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());

C. Delete the control:

删除控件:map.removeControl(control);

D. Modify the control:

constructor Function	Description
Setanchor (Anchor:enum Controlanchor)	Set the position of the control docked
Getanchor	Returns the location where the control is docked

where the Setanchor () method's anchor allowed values are:

1. Bmap_anchor_top_left indicates that the control is positioned in the upper-left corner of the map.
2. Bmap_anchor_top_right indicates that the control is positioned in the upper-right corner of the map.
3. Bmap_anchor_bottom_left indicates that the control is positioned in the lower-left corner of the map.
4. Bmap_anchor_bottom_right indicates that the control is positioned in the lower-right corner of the map.

3. Covering: A. Introduction

Overlays: All overlays or overlays to the map, collectively referred to as map coverings. such as callouts, vector graphic elements (including: Polylines and polygons, and circles), information windows, and so on. Overlays have their own geographic coordinates, and when you drag or zoom the map, they move accordingly.

The Map API provides the following types of overlays:

• Overlay: The abstract base class of the covering, all of which inherit the method of this class.
• Marker: The callout represents a point on the map, and you can customize the icon for the callout.
• Label: Represents a text callout on a map, and you can customize the text content of the callout.
• Polyline: Represents a polyline on a map.
• Polygon: Represents a polygon on a map. Polygons are similar to closed polylines, and you can also add fill colors to them.
• Circle: Represents a circle on a map.
• Infowindow: Information window is also a special covering, it can display more rich text and multimedia information.
• Callout: The callout represents a point on the map. The API provides a default icon style

B. Creating a callout

var map =  New bmap. Map ("map"); var point = new bmap. point (116.404,39.915); map. centerandzoom (Point, 15); marker = new bmap.marker (point); //Create callout map. Addoverlay (marker); //add labels to the map            

C. Registering events

marker.addEventListener("click",function(){    alert("点击事件");});

D. Can be dragged and labeled

marker.enableDragging();marker.addEventListener("dragend",function(e){    alert("当前位置：" +e.point.lng + ", " + e.point.lat);})

E. Delete annotations (delete other overlays call the same method)

map.removeOverlay(marker);

F. Information window:

The Information window floats above the map to display HTML content. The information window can be opened directly anywhere on the map, or it can be opened on a callout object (the coordinates of the information window are consistent with the coordinates of the callout). You can use the Infowindow to create an instance of an information window, noting that only one of the information Windows is open on the same time map

Open the window:

var opts = {    width: 250, //信息窗口宽度    height:100, //信息窗口高度 title: "Hello" //信息窗口标题}var infoWindow = new BMap.InfoWindow("<input type = ‘button‘ value=‘按钮‘>", opts); //创建信息窗口对象map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口

G. Hide and Show

marker.hide(); // 隐藏覆盖物Marker.show(); // 显示覆盖

Baidu Map API uses