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

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

 1.引入百度地图相关的API，我这里选的是web的JavaScript API。后端的，移动端的都有，具体的看自己需求对应引用。

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 : 500,     // 信息窗口宽度
        height: 300,     // 信息窗口高度
        title : "信息窗口" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };
    //定义信息窗口里面要显示的内容
    var content = "
"
        content +=" 
深圳市和平饭店
地址：深南大道
营业时间：24小时营业
"
        content +="
深圳市和平饭店
地址：深南大道
营业时间：24小时营业
"
        content +="
西式中式特色更多
";
        content +="
";
   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.这只是百度地图应用的很小一部分，更多的可以参考百度地图开放平台 http://lbsyun.baidu.com/index.php?title=jspopular