首页 > 代码库 > 百度地图的使用之获取数据库表中信息的坐标点显示在地图上

百度地图的使用之获取数据库表中信息的坐标点显示在地图上

2024-07-09 16:32:23   219人阅读

//通用封装好的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);//创建markerfunction 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);    }}//创建一个Iconfunction 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=http://www.mamicode.com/"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=http://www.mamicode.com/"搜索" id="btnSearch"/> </body></html>
获取数据库数据

 


联系
我们