最近在公司的項目中所用到的一個模塊。通過百度地圖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中。
不善於用語言來表達這一切，就讓代碼代表我的心吧。