使用百度地圖LBS建立自定義標註

時間 2019-11-18

標籤使用百度地圖 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數據庫中能夠在頁面用很是簡單的幾行代碼就能夠將本身的數據展現在地圖上，這樣會自動生成標註，信息窗，搜索結果列表，還會自動分頁，實現地圖標註與結果列表聯動，很是方便。javascript

但也有一個缺點，那就是不能在結果列表中顯示自定義字段，只能顯示標題和地址，若是想顯示電話就不行了（也多是我沒找到方法）。php

而百度地圖也提供了接口讓咱們獲取數據，而後本身處理這些數據，這就使得咱們能仿照百度地圖的方式來生成標註，信息窗，搜索結果列表，實現分頁，地圖標註與結果列表聯動，還能在結果列表中顯示自定義字段。css

<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數據，咱們就能夠按照咱們本身想要的方式處理結果。html

而若是不想使用LBS，而是想使用本身的數據庫存儲數據，雖然LBS也提供接口讓咱們能管理LBS上的數據，但這樣能更方便的對數據進行修改，那麼咱們只要在後臺返回相似格式的json數據就好了。java

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

<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>