Baidu Map API (1): Add a callout point to the map __api

1. Realization function: through the given coordinates point, adds the annotation point to the map, clicks the annotation point, displays the a pity Dorado detailed information.
2. Effect Chart:
Demo Link:http://www.ltbetter.com:8080/BMap/MapTest1.html

3. Core method: Manually create the data, the actual project is to accept the GPS information

Establish coordinate points:
//LNG: Longitude Lat: latitude
var points = [  
{"LNG": 112.58, Lat: 26.89, "url": "Http://www.baidu.com", "id": 1, "Name": "P1"},  
{"LNG": 112.59, "lat": 26.90, "url": "Http://www.mi.com", "id": 2, "name": "P2"},  
{"LNG": 112.57, " Lat ": 26.88, url": "Http://www.csdn.com", "id": 3, "name": "P3"}  

Create add callout point to map and add click event for Callout Point

Create a callout point and add it to the map
function Addmarker (points) {
    //loop to create the callout point
    for (var i=0, pointslen = points.length; i< Pointslen; i++) {
        var point = new Bmap.point (POINTS[I].LNG, Points[i].lat);//convert point to map dot
        var marker = new Bmap.marker (poin T); Converting the point into a callout point
        map.addoverlay (marker);  Add a callout point to the map
        //Add a listener event
        (function () {
            var thepoint = points[i];
            Marker.addeventlistener ("click",
            ///Display information method
                function () {
                showinfo (this,thepoint);
            })
         ();  
    }
}

Writing Information Display methods

function Showinfo (thismarker,point) {
    //Get point information
    var scontent = 
    ' <ul style= ' margin:0 0 5px 0;padding:0.2em 0 "> '  
    + ' <li style=" line-height:26px;font-size:15px; > '  
    + ' <span style= "width:50px;display:inline-block;" >id:</span> ' + point.id + ' </li> '  
    + ' <li style= ' line-height:26px;font-size:15px; > '  
    + ' <span style= "width:50px;display:inline-block;" > Name:</span> ' + point.name + ' </li> '  
    + ' <li style= ' line-height:26px;font-size:15px; ><span style= "Width:50px;display:inline-block;" > View: </span><a href= "' +point.url+ '" > Details </a></li> '  
    + ' </ul> ';
    var Infowindow = new Bmap.infowindow (scontent); Create the Information Window object
    Thismarker.openinfowindow (Infowindow);///////////////Redraw Infowindow after loading

Create a map

Create a map
var map = new Bmap.map ("Allmap");    
Map.centerandzoom (New Bmap.point (116.404, 39.915), one);  Set Center point
map.centerandzoom ("Hengyang");       Designated Central city
map.setcurrentcity ("Hengyang");          
Map.addcontrol (New Bmap.maptypecontrol ());  Set to drag 
map.enablescrollwheelzoom (true);  Add Wheel Zoom   
Addmarker (points);//Add Callout
</script>

TIP: Want to use the Baidu Map API need to apply for an AK, the application method is not introduced, a lot of Baidu.

full code (AK that does not include APIs needs to apply for itself):

<! DOCTYPE html>  References: http://blog.csdn.net/liusaint1992/article/details/50070839