百度地图APi从数据库动态获取坐标点并显示

百度地图APi从数据库动态获取坐标点并显示

最近有项目涉及到百度地图这方面的知识,分享下 给有做这项目的小小的参考。
使用语言:C#+sql server

首先从数据库获取想显示的坐标
百度地图APi从数据库动态获取坐标点并显示_第1张图片
获取到之后我们是需要把得到的数据从后台传到前台页面上做显示,这里数据传递方式也比较多
我们这是通过AJAX来实现的
1、从数据库得到的数据是DataTable,所以我们要把数据转换成Json类型的数据
DataTable转换成json方法:

public static string DataTableToJson(DataTable table)
{
var JsonString = new StringBuilder();
if (table.Rows.Count > 0)
{
JsonString.Append("[");
for (int i = 0; i < table.Rows.Count; i++)
{
JsonString.Append("[");
for (int j = 0; j < table.Columns.Count; j++)
{
if (j < table.Columns.Count - 1)
{
JsonString.Append(table.Rows[i][j].ToString()+",");
}
else if (j == table.Columns.Count - 1)
{
JsonString.Append( table.Rows[i][j].ToString() );
}
}
if (i == table.Rows.Count - 1)
{
JsonString.Append("]");
}
else
{
JsonString.Append("],");
}
}
JsonString.Append("]");
}
return JsonString.ToString();
}

得到数据库的坐标点,并转换成Json
[System.Web.Services.WebMethod()]
public static string lodaa()
{
string strJson = string.Empty;
DataSet ds1 = DAL.CORSStationInfo.GetOKXY();
return strJson = JsonConvert.SerializeObject(new { dt1 = JsonHelper.DataTableToJson(ds1.Tables[0]) });
}

2.前台Ajax获取后台数据(要引用的一些Js,地图的创建这里就省略了)

 $(function () {
            $.ajax({
                url: "Index.aspx/lodaa",
                contentType: "application/json; charset=utf-8",
                type: "Post",
                dataType: "json",
                success: function (data) {
                    var res = JSON.parse(data.d);
                        var points1 = $.parseJSON(res.dt1);
                            for (var i = 0; i < points1.length; i++) {
                            var myIcon = new BMap.Icon("Script/icon/bluedot.png", new BMap.Size(25, 25));
                            var point = new BMap.Point(points1[i][0], points1[i][1]);
                            var marker = new BMap.Marker(point, { icon: myIcon });
                            map.addOverlay(marker);
                        }
                },             
            });
        })

以上就是全部的关键代码

效果图如下:
百度地图APi从数据库动态获取坐标点并显示_第2张图片

你可能感兴趣的:(百度地图APi从数据库动态获取坐标点并显示)