百度地图标注点及标注信息显示

最近领导让搞一个百度地图标注并显示其标注信息的功能，之前没有搞过地图相关的东西，今天总结一下，其实还是很简单的，不废话了，直接上代码，新手看很有用的，请仔细阅读，不要盲目求快，有些小细节刚开始还是很坑的。
首先，创建html页面，这里不讲页面，主要说一下地图相关的js。
需要的引用：在引用中输入秘钥，秘钥在开发中心获取。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

然后，开始创建地图：

    var map = new BMap.Map("allmap",{minZoom:4,maxZoom:15});    // 创建Map实例,并设置地图最大最小级别
    map.centerAndZoom(new BMap.Point(116.405419,39.914714), 13);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));  //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

添加这几行代码，基本的地图就成型了。
打开地图页面直接获取已经添加的标注点：

    var marker;
    var point;
    var searchInfoWindow = null;
    //显示标注点信息
    var addinfo = function (marker,searchInfoWindow){
        marker.addEventListener("mouseover", function () {searchInfoWindow.open(marker);});
        //mouseover  表示将鼠标放到标注点上，就可显示信息，点击后显示可用“click”
    }
    //删除标注点
    var removeMarker = function(e,ee,marker){
    map.removeOverlay(marker);
    }
    $(function(){
        $.ajax({
            type:"post",
            url:"../connection/select",
            async:true,
            dataType:"json",
            success:function(data){
              alert("success")
               for(var i=0;i<data.length;i++){  
               point =new BMap.Point(data[i].point_x,data[i].point_y);
                marker =new BMap.Marker(point);
                map.addOverlay(marker);
               //*****************

               var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                 '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                             '地址：' + data[i].point_x +','+ data[i].point_y + '<br/>时间：'+ data[i].time +'<br/>简介：'+data[i].info +
                            '</div>';
                            //********************
               searchInfoWindow = new BMapLib.SearchInfoWindow(map,content,{
                    title: "标题  : " +data[i].id, //标题
                    width:290, //宽
                    height:105, //高
                    enableAutoPan: true, //自动平移
                    searchTypes : [
                            BMAPLIB_TAB_SEARCH, //周边检索
                            BMAPLIB_TAB_TO_HERE, //到这里去
                            BMAPLIB_TAB_FROM_HERE //从这里出发
                        ]

                    });

                    //给标记添加点击事件以及显示窗口信息
                    addinfo(marker,searchInfoWindow);
                    //创建菜单
                    var markerMenu =new BMap.ContextMenu();
                    markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
                    markerMenu.addItem(new BMap.MenuItem('编辑信息',IN.bind(marker)));
                    marker.addContextMenu(markerMenu);
                            }  
                            //****
                        },
            error:function(){
                alert("fail");
               }
           });
    });

添加地图响应事件，例如：单击左键，添加标注，编辑信息时保存数据

 //左键单击地图响应事件
     map.addEventListener("click", function(n){
            //1.点击动态生成标注点
            point=new BMap.Point(n.point.lng,n.point.lat);
            marker =new BMap.Marker(point);
            map.addOverlay(marker);

            //2.为标注点生成右击菜单
            //创建菜单，可以抽取为方法，请自行搞定
            var markerMenu =new BMap.ContextMenu();
            markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
            markerMenu.addItem(new BMap.MenuItem('编辑信息',IN.bind(marker)));
            marker.addContextMenu(markerMenu);

            }); 
        function save(){
            var INFO = $("#inpu").val();
            if (INFO == null || INFO == "") {
                alert("请输入信息");
                return;
            }
                alert(INFO +"666");
             $.ajax({
                        type:"post",
                        url:"../connection/save",
                        async:true,
                        dataType:"text",
                        data:{info: INFO,"point_x":point.lng,"point_y":point.lat},
                        success:function(data){
                            alert("success")
                            alert(data);
                        },
                        error:function(){
                            alert("fail");
                        }
                    })

        }   

基本的功能到此就可实现，其他更细节问题请根据单位要求自行设定。实现其他的功能实现逻辑都是一样的，首先你要明白目的是什么，勿盲目上手开始写，将逻辑理清楚，去查阅，事半功倍！