最近领导让搞一个百度地图标注并显示其标注信息的功能，之前没有搞过地图相关的东西，今天总结一下，其实还是很简单的，不废话了，直接上代码，新手看很有用的，请仔细阅读，不要盲目求快，有些小细节刚开始还是很坑的。
首先，创建html页面，这里不讲页面，主要说一下地图相关的js。
需要的引用：在引用中输入秘钥，秘钥在开发中心获取。
<script type="text/javascript" src="http://api./api?v=2.0&ak=您的秘钥"></script><script type="text/javascript" src="http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href="http://api./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");}})}
基本的功能到此就可实现，其他更细节问题请根据单位要求自行设定。实现其他的功能实现逻辑都是一样的，首先你要明白目的是什么，勿盲目上手开始写，将逻辑理清楚，去查阅，事半功倍！
