使用百度地图LBS创建自定义标注

<body>
    <div id="allmap"></div>
    <div class="sel_container" id="getCurrentPosition">
        <strong >定位中...</strong>
    </div>
    <div id="r-result"></div>

<script type="text/javascript">
    window.onload = loadJScript;  //异步加载地图
    var map;
    var arrayMK = new Array();
    var arrayInfo = new Array();
    var arrayPoint = new Array();

    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L&callback=init";
        document.body.appendChild(script);
    }
    function init() {
        map = new BMap.Map("allmap");
        map.centerAndZoom("深圳", 15);                         // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();                         //启用滚轮放大缩小
        $("#getCurrentPosition").show();
        var geol = new BMap.Geolocation();
        geol.getCurrentPosition(                            //浏览器定位，异步执行
            function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    $("#getCurrentPosition").hide();
                    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件，默认位于地图右上方
                    map.addControl(new BMap.GeolocationControl()); //添加定位控件，针对移动端开发，默认位于地图左下方
                    map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));//添加缩放平移控件

                    /*创建定位标注*/
                    var mk = new BMap.Marker(r.point);// 创建标注
                    map.addOverlay(mk);// 将标注添加到地图中
                    /*创建定位标注文本*/
                    var label1 = new BMap.Label("您在这里",{offset:new BMap.Size(20,-10)});
                    mk.setLabel(label1);

                    /*创建检索*/
                    var local = new BMap.LocalSearch(//检索构造函数
                        map, //检索区域,可为地图实例、坐标点或城市名称的字符串
                        {
                            renderOptions : {
                                map : map,
                                panel: "r-result",
                                selectFirstResult: false,//是否选择第一个检索结果
                                autoViewport: false//检索结束后是否自动调整地图视野
                            }
                        }
                    );
                    local.search(//根据检索词检索
                        "影儿", //支持多关键字的数组，最多支持10个关键字
                        {
                            forceLocal:true,//否将搜索范围约束在当前城市
                            customData : {//检索 LBS云服务的数据
                                geotableId : 137759
                            }
                        }
                    );
                } else {
                    alert(‘定位失败！‘ + this.getStatus());
                }
            },
            {
                enableHighAccuracy : true    //是否启动高精度定位
            }
        );
    }
</script>
</body>

将数据存入LBS数据库中可以在页面用非常简单的几行代码就可以将自己的数据展示在地图上，这样会自动生成标注，信息窗，搜索结果列表，还会自动分页，实现地图标注与结果列表联动，非常方便。

但也有一个缺点，那就是不能在结果列表中显示自定义字段，只能显示标题和地址，如果想显示电话就不行了（也可能是我没找到方法）。

而百度地图也提供了接口让我们获取数据，然后自己处理这些数据，这就使得我们能仿照百度地图的方式来生成标注，信息窗，搜索结果列表，实现分页，地图标注与结果列表联动，还能在结果列表中显示自定义字段。

<body>
    <div id="allmap"></div>
    <div class="sel_container" id="getCurrentPosition">
        定位中...
    </div>
    <div id="pageLink">
        <div>
        </div>
    </div>
    <div id="myResult">
        <ol>
        </ol>
    </div>
    <div id="r-result">
    </div>

<script type="text/javascript">
    var map;
    var currentPosition;//定位位置
    var arrayMK = [];//标注列表
    var arrayInfo = [];//信息窗列表
    var arrayPoint = [];//位置列表
    var searchOption = {
        radius: 100000, //检索范围半径
        page_index: 0,
        page_size: 10,
        ak: "dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L" ,//密钥
        geotable_id: "137759" ,//LBS表ID
        sortby: "distance:1"//按距离排序
    };

    $(function(){
        loadJScript();
    });
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=dCWMX37RFMXV4a7ZSrXldG3VE1VDYw7L&callback=init";
        document.body.appendChild(script);
    }
    function init() {
        map = new BMap.Map("allmap");
        map.centerAndZoom("深圳", 15);                         // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();                         //启用滚轮放大缩小
        $("#getCurrentPosition").show();
        var geol = new BMap.Geolocation();
        geol.getCurrentPosition(                            //浏览器定位，异步执行
            function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    map.setCenter(r.point);
                    $("#getCurrentPosition").hide();
                    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件，默认位于地图右上方
                    map.addControl(new BMap.GeolocationControl()); //添加定位控件，针对移动端开发，默认位于地图左下方
                    map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));//添加缩放平移控件
                    currentPosition = r.point;
                    makercurrentPosition(currentPosition);
                    searchOption.location = r.point.lng+‘,‘+r.point.lat;
                    getMakerData(0);// 获取检索数据第一页

                } else {
                    alert(‘定位失败！‘ + this.getStatus());
                }
            },
            {
                enableHighAccuracy : true    //是否启动高精度定位
            }
        );
    }
    function makercurrentPosition(point){// 创建定位标注
        var maker = new BMap.Marker(point);
        var label = new BMap.Label("您在这里",{offset:new BMap.Size(20,-10)});
        maker.setLabel(label);
        map.addOverlay(maker);// 将标注添加到地图中
    }
    function gotoPage(pageIndex){
        map.clearOverlays();
        $("#myResult ol").empty();
        $("#pageLink div").empty();
        makercurrentPosition(currentPosition);
        getMakerData(pageIndex);
    }
    function getMakerData(pageIndex){// 获取检索数据
        searchOption.page_index = pageIndex;
        $.ajax({
          type: ‘get‘,
          contentType: "application/json; charset=utf-8",
          url: "http://api.map.baidu.com/geosearch/v3/nearby",
          dataType: ‘jsonp‘,
          data: searchOption,
          success:function(result){
            var pageTotal = Math.ceil(result.total / searchOption.page_size);
            if(pageTotal>1){//分页
                if(pageIndex!=0){
                    $("#pageLink div").append(‘<span><a href="javascript:void(0)" onclick="gotoPage(‘+(pageIndex-1)+‘);">上一页</a></span>‘);
                }else{
                    $("#pageLink div").append(‘<span>上一页</span>‘);
                }
                for  (var i = 0; i < pageTotal; i++) {
                    if(pageIndex == i){
                        $("#pageLink div").append(‘<span>‘+(i+1)+‘</span>‘);
                    }else{
                        $("#pageLink div").append(‘<span><a href="javascript:void(0)" onclick="gotoPage(‘+i+‘);">‘+(i+1)+‘</a></span>‘);
                    }
                }
                if(pageIndex!=pageTotal-1){
                    $("#pageLink div").append(‘<span><a href="javascript:void(0)" onclick="gotoPage(‘+(pageIndex+1)+‘);">下一页</a></span>‘);
                }else{
                    $("#pageLink div").append(‘<span>下一页</span>‘);
                }
            }
            //清空历史数据
            arrayMK = [];
            arrayInfo = [];
            arrayPoint = [];
            var store = result.contents;
            for (var i = 0; i < store.length; i++) {
                createMaker(store[i],i);// 创建检索结果标注
            }
            resultClickEvent();//结果列表注册单击事件
          }
        });
    }
    function resultClickEvent(){//结果列表注册单击事件
        $("#myResult ol li").live("click", function(){
            $(".info").removeClass("active");
            $(this).find(".info").addClass("active");
            var serialNo =$(this).find(".serialNo").text();
            arrayMK[serialNo].openInfoWindow(arrayInfo[serialNo],arrayPoint[serialNo]); //开启信息窗口
        });
    }
    function getIcon(num){// 创建标注图片（A-J，共10个）
        var icon = new BMap.Icon(
                "http://api.map.baidu.com/images/markers.png",
                new BMap.Size(23, 25),//标注区域大小
                {
                    imageOffset:new BMap.Size(0, -25*num),//可视区域的偏移值，等同于 CSS 中的background-position 属性
                    anchor: new BMap.Size(9.5, 25),//标注图片锚点位置
                    infoWindowAnchor: new BMap.Size(10, 0)//信息窗口锚点位置
                }
            );
        return icon;
    }
    function createMaker(store,num){// 创建检索结果标注
        var shadow = new BMap.Icon(//标注阴影
            "http://api0.map.bdimg.com/images/marker_red_sprite.png",
            new BMap.Size(20, 11),
            {imageOffset:new BMap.Size(-19, -23)}
        );
        var point0 = new BMap.Point(store.location[0], store.location[1]);
        var marker0 = new BMap.Marker(point0, {
            icon : getIcon(num),//标注图片
            shadow : shadow//标注阴影
        }); // 创建标注
        map.addOverlay(marker0); // 将标注添加到地图中

        var opts = {
          width : 0,     // 信息窗口宽度
          height: 0,     // 信息窗口高度
          title : ‘<p class="infoWindowTitle" >‘+store.title+‘</p>‘, // 信息窗口标题
          enableMessage:true,    //设置允许信息窗发送短息
          message:"xxx"
        }
        var infoWindow0 = new BMap.InfoWindow(‘<p class="infoWindowContent" >地址：‘+store.address+‘<br/>电话：‘+store.phoneNumber+‘</p>‘, opts);  // 创建信息窗口对象
        var newli = $(‘<li><span class="icon">&nbsp;</span><div class="info"><div class="title"><span></span></div><div class="address"><b>地址:</b><span></span></div><div class="phoneNumber"><b>电话:</b><span></span></div><p class="serialNo" hidden="hidden"></p></div></li>‘).appendTo($("#myResult ol"));
        newli.attr("id",num);
        newli.find(".icon").css({ background:"url(http://api.map.baidu.com/images/markers.png) -23px "+ (-25*num) + "px no-repeat" });
        newli.find(".title").find("span").html(store.title);
        newli.find(".address").find("span").html(store.address);
        newli.find(".phoneNumber").find("span").html(store.phoneNumber);
        marker0.addEventListener("click", function(){  //标注注册单击事件
            marker0.openInfoWindow(infoWindow0,point0); //开启信息窗口
            $(".info").removeClass("active");
            newli.find(".info").addClass("active");
        });
        newli.find(".serialNo").text(num);
        arrayMK.push(marker0);
        arrayInfo.push(infoWindow0);
        arrayPoint.push(point0);
    }

</script>
</body>

由于能从LBS获取json数据，我们就可以按照我们自己想要的方式处理结果。

而如果不想使用LBS，而是想使用自己的数据库存储数据，虽然LBS也提供接口让我们能管理LBS上的数据，但这样能更方便的对数据进行修改，那么我们只要在后台返回类似格式的json数据就行了。

参考：http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch

<style type="text/css">
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
.active{
    background-color: rgb(240, 240, 240);
}
#myResult{
    font-stretch: normal;font-size: 12px; line-height: normal; font-family: arial, sans-serif; border: 1px solid rgb(153, 153, 153);background: rgb(255, 255, 255);
}
#myResult ol{
    list-style: none; padding: 0px; margin: 0px;
}
#myResult ol li{
    margin: 2px 0px; padding: 0px 5px 5px 0px; cursor: pointer; overflow: hidden; line-height: 17px;
}
#myResult ol li .info{
    zoom: 1; overflow: hidden; padding: 0px 5px;
}
#myResult ol li .icon{
    width:19px;height:25px;cursor:pointer;float:left;*zoom:1;overflow:hidden;margin:2px 3px 0 5px;*margin-right:0px;display:inline;
}
#myResult ol li .info .title{
    padding:0;line-height:20px;font-size:12px;
}
#myResult ol li .info .title span{
    color:#00c;
}
#myResult ol li .info .address,#myResult ol li .info .phoneNumber{
    padding:2px 0;line-height:18px;*zoom:1;overflow:hidden;
}
#myResult ol li .info .address b,#myResult ol li .info .phoneNumber b{
    float:left;font-weight:bold;*zoom:1;overflow:hidden;padding-right:5px;*margin-right:-3px;
}
#myResult ol li .info .address span,#myResult ol li .info .phoneNumber span{
    color:#666;display:block;zoom:1;overflow:hidden;
}
#allmap {
    width: 100%;
    height: 400px;
}
.infoWindowTitle{
    width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden;
}
.infoWindowContent{
    font: 12px arial,sans-serif;margin:10px 0;
}
#pageLink{
    white-space: nowrap; text-align: right; margin-top: 5px; padding: 2px; overflow: hidden; zoom: 1; background: rgb(229, 236, 249);
}
#pageLink div{
    float: left; margin-right: 5px;padding:0;white-space:nowrap
}
#pageLink div span{
    margin-right:3px;
}
#pageLink div span a{
    color:#7777cc;
}
p {
    margin-left: 5px;
    font-size: 14px;
}

.sel_container {
    z-index: 9999;
    font-size: 14px;
    font-weight:bold;
    position: absolute;
    right: 0px;
    top: 0px;
    /* width: 150px; */
    background: rgba(255, 255, 255, 0.8);
    height: 20px;
    line-height: 20px;
    padding: 0px;
    display:none
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>

style & script

时间： 2024-10-31 15:06:23

使用百度地图LBS创建自定义标注的相关文章

Android应用中使用百度地图API并添加标注（一）

网上一些资料这种的内容已经过时了,这里是最新的内容,如果哪里不对,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就需要在工程中引用百度地图API开发包,这个开发包包含两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:例如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77:FB;com.maji

Android应用中使用百度地图API并加入标注（一）

网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包      要在Android应用中使用百度地图API,就须要在project中引用百度地图API开发包,这个开发包包括两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:比如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77

百度地图 点击和标注拖拽后的经纬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no

谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content

【百度地图API】自定义可编辑的交通路线

原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘制结束后,路线可编辑. TIPS: API1.1以后,可以使用enableEditing()来开启折线可编辑功能. 图示: 运行代码,请点击这里. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖物的基础上的. 如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭? 做下笔记,包括了自定义覆盖物标识.自定义信息窗口.信息窗口显示实时信息.清除覆盖物时信息窗口的显示问题等等. 贴张效果图:     代码: <script type="text/javascript&

调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注

前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 这个小项目分为前台和后台 前台需要两个页面,第一个页面是一打开就可以获得自己的实时位置,显示当前位置与当前的经纬度,这两项是自动获取的,还有标题和电话是可以自己添加的,点击添加,就是到达百度地图的页面,你刚刚添加的东西就会在这个地图上显示,形成一个标注,点击标注,里面显示的就是刚刚你添加的标题和电话

百度地图LBS应用开发代码

最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo,最后就自己动手参照原来的应用的功能,用百度地图实现了一下.下面就给大家介绍一下,百度地图API开发的一些基础技术. 首先,百度地图API的官方首页是:http://dev.baidu.com/wiki/static/index.htm,上面介绍了很多详细的信息,各种版本的API,成功案例,还有在线帮