The first contact of Baidu Map API--The use of annotations and information windows

1. Define the JS function to add labels at the specified location, add and open the Information window in the label location

    functionAddmarker (point, index) {//To Create an icon object                            varMyicon =NewBmap.icon ("Http://api.map.baidu.com/img/markers.png",NewBmap.size (23, 25), {offset:NewBmap.size (10, 25),//Specify positioning locationImageoffset:NewBmap.size (0, 0-index * 25)//Set Picture offset                            }); varMarker =NewBmap.marker (Point, {icon:myicon});//Use Icon object to create callout map.addoverlay (Marker); Marker.addeventlistener ("Click",function() {//Callout Click event Listenervaropts ={width:250,//Information window widthHeight:120,//Information window HeightTitle:"Infowindow"//Information window Title                                        }                                        varInfowindow =NewBmap.infowindow ("Hello world!", opts);//Create an Information window objectMap.openinfowindow (Infowindow, point); //Open the Information window at the callout                               }); }

2. Randomly generate 5 labels within the map

 var  bounds = Map.getbounds (); Get the map boundary 
  var  Lngspan = Bounds.maxx- Bounds.minx;                           var  Latspan = bounds.maxy- Bounds.miny;   for  (var  i = 0; i < 5;  I ++ var  point = new  Bmap.point (Bounds.minx + Lngspan * (Math.random () * 0.7 + 0.15), Bounds.miny  +  Latspan * (Math.random () * 0.7 + 0.15 

3. Open the browser to see the effect

The first contact of Baidu Map API--The use of annotations and information windows