How to use baidu map api to add markers on map?

An important feature of a map application is the ability of adding/displaying markers on a map. Markers, together with other elements such as labels, poly-lines,polygons, circles, etc. are called overlays in the terminology of baidu map api. Adding a marker on map is just two lines of code:

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Baidu Map </title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>  
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>	
</head>  
<body>
<div id="container"></div>
<script>
var map = new BMap.Map("container");  
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
//var opt={offset: new BMap.Size(150, 5),type: BMAP_NAVIGATION_CONTROL_PAN};
//map.addControl(new BMap.NavigationControl(opt)); 
map.addControl(new BMap.NavigationControl()); 
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());   

var marker = new BMap.Marker(point);  
map.addOverlay(marker);  
 
</script>

</body>  
</html>

You can see a marker(a red drip-drop) is added at the center of the map. Typically, after you know how to add a marker, the first thing you want to do is to change the shape of the marker. We can use another shape or image to replace the default drip-drop.

var myIcon = new BMap.Icon("heart.png", new BMap.Size(48, 48), {anchor: new BMap.Size(24, 48)});  
var marker = new BMap.Marker(point,{icon: myIcon});  
map.addOverlay(marker);

Basically, you need to pass another parameter in addition to the location, to the constructor of the marker to specify an icon you want to show the marker. The icon object can be created with BMap.Icon. The first parameter of this constructor is the icon image file name, the second parameter is the size of the image, the third parameter specifies which point in the image will be the pointer of the marker(the top-left point of the icon is (0,0)). Now you can see the marker is changed to a heart icon.

As I said, apart from markers, labels, circles, etc. are all overlays, which can be added to the map using the addOverlay function.

map.addOverlay(new BMap.Label("alabel",{position:new BMap.Point(116.404, 39.915)}));
map.addOverlay(new BMap.Circle(new BMap.Point(116.404, 39.915),500));

Pay attention to the constructors of these overlay objects. You can guess, the first parameter of the Label constructor is the text of the label. The second parameter is where the left-top of the label is put. The first parameter of the BMap.Circle is the center point of the circle and the second parameter is the radius of the circle(the unit is meter in real-world distance). The label, circle, and the marker are shown in the following map: