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

时间：2016-04-29 13:50:12 阅读：251 评论：0 收藏：0 [点我收藏+]

标签：

<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

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

标签：

原文地址：http://www.cnblogs.com/guodefu909/p/5445823.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行