最近在公司的项目中所用到的一个模块。通过百度地图API和本地数据库所连接起来。在显示的百度地图中所出现的标记点都是本地数据库中保存的记录。
由于是刚刚毕业，在公司做ASP.NET才半年的光景，所以语言表达和组织上都没有各位前辈那么流畅，而且是小弟第一篇博文，还是请各位多多指点。
首先先建数据库的表。因为只是一个很小的测试案例，所以只用到了三个字段，其中Point字段是保存经纬度，Title字段是保存标记点的名称。
接下来做一个添加页面。在添加页面根据所输名称和地址来获取其在百度地图上的经纬度。然后通过访问数据库，可以将标记点的信息和经纬度保存在数据表中。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>添加</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=59db371659c04947a1ff044e80565718&v=1.1&services=true">
</script>
type="text/javascript"></script>--%>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
名称<input id="text1" type="text" value="" runat="server" />
<br />
地址<input id="text3" type="text" value="" runat="server" />
<br />
<div style="width: 400px; height: 200px; border: 1px solid gray" id="info" runat="server">
<asp:TextBox runat="server" Style="width: 200px; height: 100px;" ID="jwd"></asp:TextBox>
</div>
<input id="btn1" type="button" value="经纬度查询" />
<div style="width: 400px; height: 200px; border: 1px solid gray" id="container">
</div>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="添加" />
</form>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(121.528599, 31.217681), 18);
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
$(document).ready(function () {
$("#btn1").click(function () {
document.getElementById("jwd").value = "";
var LocalSearch = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
var cc = $("#text3").val() + $("#text1").val();//获取两个文本框中的信息内容，作为查询的条件。用名称加地址的查询条件可以避免查找到多个经纬度
LocalSearch.search(cc);
LocalSearch.setSearchCompleteCallback(function () {
var item = LocalSearch.getResults();
for (var i = 0; i < item.getNumPois(); i++) {//保险起见还是用了循环来输入经纬度
var LocalResultPoi = item.getPoi(i);
document.getElementById("jwd").value = document.getElementById("jwd").value + LocalResultPoi.point.lng + "," + LocalResultPoi.point.lat + "\n";
}
});
});
});
</script>
后台访问数据库代码，用了简单的三层架构。
protected void Button2_Click(object sender, EventArgs e) { Maticsoft.BLL.Map MAP = new BLL.Map(); Maticsoft.Model.Map map = new Model.Map(); map.point = this.jwd.Text; ; map.title = this.text1.Value; map.address = this.text3.Value; MAP.Add(map); }
按照做完上面的步骤并且运行以后，你可以在页面的名称和地址的文本框中输入你所需要保存的标记点。然后单击经纬度查询按钮就能在下方的文本框中显示出该标记点的经纬度。最后单击添加按钮，就能完成此次数据的添加。百度地图API的查询关键就是经纬度。所以获取经纬度并添加到数据库中是能否查询出相对应标记点的关键。
接着就要在查询页面中与刚才的数据库相关联，在页面中的百度地图上标记出刚才的标记点。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DBMaps.aspx.cs" Inherits="Maticsoft.Web.DBMaps" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>百度地图</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>//1.3之后的百度地图API都是需要获取KEY的，获取方法可以百度。 </head> <body> <div style="width: 1024px; height: 768px; border: 1px solid gray" id="container">//显示百度地图 </div> <%=tt() %> //在前台调用后台的方法。 </body> </html>
protected string tt() { DataTable da = new DataTable(); StringBuilder sb = new StringBuilder(); Maticsoft.BLL.Map MP = new BLL.Map(); da = MP.GetList(" ").Tables[0]; string point = ""; string marker = ""; string map = ""; string opts = ""; string infoWindow = ""; string addEventListener = ""; for (int i = 0; i < da.Rows.Count; i++) { point += "new BMap.Point(" + da.Rows[i]["point"] + "), ";//获取经纬度 marker += "var marker" + i + " = new BMap.Marker(points[" + i + "], { icon: myIcon });";//图标 map += "map.addOverlay(marker" + i + ");"; opts += "var opts" + i + " = { title: \'<span style=\"font-size:14px;color:#0A8021\">" + da.Rows[i]["title"] + "</span>\' };"; infoWindow += "var infoWindow" + i + "= new BMap.InfoWindow(\"<div style=\'line-height:1.8em;font-size:12px;\'><b>地址:</b>" + da.Rows[i]["address"] + "</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src=\'图片地址\' /><img src=\'图片地址\' /><img src=\'图片地址\' /><img src=\'图片地址\' /><img src=\'图片地址\' /><a style=\'text-decoration:none;color:#2679BA;float:right\' href=\'#\'>详情>></a></div>\", opts" + i + ");"; addEventListener += "marker" + i + ".addEventListener(\"onclick\", function () { this.openInfoWindow(infoWindow" + i + "); });"; } string Point = Maticsoft.Common.StringPlus.DelLastComma(point); sb.Append("<script type=\"text/javascript\">"); sb.Append("var map = new BMap.Map(\"container\");"); sb.Append("var point = new BMap.Point(116.404, 39.915);"); sb.Append("map.centerAndZoom(point, 14);"); sb.Append("var myIcon = new BMap.Icon(\"Images/bd.png\", new BMap.Size(100, 100), { "); //小车图片 sb.Append("offset: new BMap.Size(0, -5), "); //相当于CSS精灵 sb.Append("imageOffset: new BMap.Size(0, 0) "); //图片的偏移量。为了是图片底部中心对准坐标点。 sb.Append("});"); sb.Append("var points = [" + Point + "]; "); //10个坐标点 sb.Append(marker); sb.Append(map); //向地图添加控件 sb.Append("map.addControl(new BMap.NavigationControl());"); //地图平移缩放控件，默认左上角 sb.Append("map.addControl(new BMap.OverviewMapControl({ isOpen: 1 }));"); //缩略地图控件，默认右下角 sb.Append("map.enableScrollWheelZoom(true);"); //启用鼠标滚动缩放地图 sb.Append("map.enableKeyboard();"); sb.Append("map.setViewport(points);"); //调整地图的最佳视野为显示标注数组point sb.Append(opts); sb.Append(infoWindow); sb.Append(addEventListener); sb.Append("</script>"); return sb.ToString(); } }
用了循环拼接字符串的方式来将字符串连在一起。通过获取数据库中的经纬度来运用到百度地图的API中。
不善于用语言来表达这一切，就让代码代表我的心吧。