百度地圖的使用之獲取數據庫表中信息的坐標點顯示在地圖上

本文轉載自查看原文 2014-06-26 09:50 4316

//通用封裝好的js:

var map = new BMap.Map("container"); //建樹Map實例
var point = new BMap.Point(103.976032, 33.845509); // 建樹點坐標
map.centerAndZoom(point, 6); // 初始化地圖,設置中心點坐標和地圖級別。
//地圖事件設置函數：
map.enableDragging(); //啟用地圖拖拽事件，默認啟用(可不寫)
map.enableScrollWheelZoom(); //啟用地圖滾輪放大縮小
map.enableDoubleClickZoom(); //啟用鼠標雙擊放大，默認啟用(可不寫)
map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖

//向地圖中添加縮放控件
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
//向地圖中添加縮略圖控件
var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
map.addControl(ctrl_ove);
//向地圖中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
//創建marker
function addMarker() {
    for (var i = 0; i < markerArr.length; i++) {
        var json = markerArr[i];
        var p0 = json.point.split("|")[0];
        var p1 = json.point.split("|")[1];
        var point = new BMap.Point(p0, p1);
        
        var iconImg = createIcon(json.icon);
        var marker = new BMap.Marker(point, { icon: iconImg });
        map.addOverlay(marker);
    }
}
//創建一個Icon
function createIcon(json) {
    // 創建圖標對象   
        //var myIcon = new BMap.Icon("../marker_red_sprite.png", new BMap.Size(23, 25), {
        //    // 指定定位位置。   
        //    // 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上    
        //    // 角各偏移10像素和25像素。您可以看到在本例中該位置即是   
        //    // 圖標中央下端的尖角位置。    
        //    offset: new BMap.Size(10, 25),    
        //    // 設置圖片偏移。   
        //    // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您   
        //    // 需要指定大圖的偏移位置，此做法與css sprites技術類似。    
        //    //imageOffset: new BMap.Size(0, 0 - index * 25)   // 設置圖片偏移    
        //});
    var icon = new BMap.Icon(圖片名稱, new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
    return icon;
}

Map.js

<html>
 <head>
  <title>百度地圖加載</title>
 </head>
 <script src="Map.js"></script>
 <script type="text/javascript"> 
    
    //聲明全局數組
    var markerArr = [];
    $(function () {
        //點擊查詢加載標注
        $("#btnSearch").click(function () {
            LoadMap();
        });

    });

    //加載游客地理位置
    function LoadMap() {
       //清空數組和所有標注點
        markerArr = [];
        map.clearOverlays();
        var par={
            startDate:$("#startDate").val(),
            endDate:$("#endDate").val()
        }
        $.ajax({
            type: "get",
            url: "/VisitorClient/GetAllInfo",
            data: par,
            dataType:"json",
            cache: false,
            success: function (r) {
                if (r.res) { 
                    dataBind(r);
                    $("#spannum").text("該時段App園區游客人數為：" + r.count);
                }
                else {
                    $("#spannum").text("該時段園區沒有人使用App");
                }
                
            },
            error: function (d)
            {
                
                alert(d.responseText);
            }
        });    
    }
    function dataBind(r) {
        $.map(r.data, function (d) {
            
            var arr = { point: "" + d.Longitude + "|" + d.Latitude };
            markerArr.push(arr);
        });
        addMarker();
    }

</script>
 <body>
  <input type="button" value="搜索" id="btnSearch"/>
 </body>
</html>

獲取數據庫數據

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度地圖-多個坐標點顯示百度地圖API讀取后台數據中坐標點並顯示在web界面百度地圖獲取數據庫點的坐標，並定時刷新到頁面上，功能一根據指定坐標在百度地圖上定位展示百度地圖開發-在地圖上檢索數據 08 百度地圖自助繪圖取坐標點百度地圖動態添加軌跡坐標點百度地圖-多個坐標點一起顯示（老大：張國輝） html5定位並在百度地圖上顯示百度地圖API開發的快速使用和添加大量坐標點的幾種方法