百度地图精准定位，自定义marker，自定义信息弹出窗口。

        先说下业务场景，在数据库查出相应的项目展示出来，然后点击项目在百度地图上标注项目的地址，同时弹出窗口显示相关的信息。下面就来看看具体的实现：

 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