先说下业务场景，在数据库查出相应的项目展示出来，然后点击项目在百度地图上标注项目的地址，同时弹出窗口显示相关的信息。下面就来看看具体的实现：
1.引入百度地图相关的API，我这里选的是web的JavaScript API。后端的，移动端的都有，具体的看自己需求对应引用。
<script type="text/javascript" src="http://api./api?v=2.0&ak=这里填写你的ak码（去百度地图开放平台获取）"></script>
2.有了这个引用，接下来就可以创建属于自己的地图。
//创建一个地图对象 l-map 是你要放地图的divvar map = new BMap.Map("l-map");//114.025973657,22.5460535462//中心地点 和放大的比例 以这个坐标为中心显示一个多大的地图var poi = new BMap.Point(114.025973657,22.5460535462);map.centerAndZoom(poi, 16);map.enableScrollWheelZoom();//显示缩放小控件map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.MapTypeControl());map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
3.根据地点创建marker在地图上面进行标注。
//1.使用经纬度进行精准定位//定义marker上面弹出的信息窗口var opts = {width : 500,// 信息窗口宽度height: 300,// 信息窗口高度title : "信息窗口" , // 信息窗口标题enableMessage:true//设置允许信息窗发送短息};//定义信息窗口里面要显示的内容var content = "<div>"content +=" <p>深圳市和平饭店</p><p>地址：深南大道</p><p>营业时间：24小时营业</p><br>"content +="<p>深圳市和平饭店</p><p>地址：深南大道</p><p>营业时间：24小时营业</p>"content +="<p><a href=''>西式</a><a href=''>中式</a><a href=''>特色</a><a href=''>更多</a></p>";content +="</div>";function markAddress(data_info){var marker = new BMap.Marker(new BMap.Point(data_info[0],data_info[1])); // 创建标注// 将定位的地点在地图上面标注出来map.addOverlay(marker);//监听marker点击后 弹出信息框marker.addEventListener("click",function(e){openInfo(content,data_info[0],data_info[1]);});//标注后直接弹出信息框openInfo(content,data_info[0],data_info[1] );}function openInfo(content,longitude,latitude ){var point = new BMap.Point(longitude, latitude );var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象map.openInfoWindow(infoWindow,point); //开启信息窗口}
4.最后这个就是显示的效果
5.这只是百度地图应用的很小一部分，更多的可以参考百度地图开放平台/index.php?title=jspopular
