先說下業務場景，在資料庫查出相應的專案展示出來，然後點選專案在百度地圖上標註專案的地址，同時彈出視窗顯示相關的資訊。下面就來看看具體的實現：

 1.引入百度地圖相關的API，我這裡選的是web的JavaScript API。後端的，移動端的都有，具體的看自己需求對應引用。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=這裡填寫你的ak碼（去百度地圖開放平臺獲取）"></script>

2.有了這個引用，接下來就可以建立屬於自己的地圖。

    //建立一個地圖物件 l-map 是你要放地圖的div
    var 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 : 250,     // 資訊視窗寬度
        height: 80,     // 資訊視窗高度
        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,longitude,latitude );
       });
       //標註後直接彈出資訊框
       openInfo(content,longitude,latitude );
   }

    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.這只是百度地圖應用的很小一部分，更多的可以參考百度地圖開放平臺 http://lbsyun.baidu.com/index.php?title=jspopular