百度地圖API鏈接本地數據庫

時間 2019-11-25

標籤百度地圖 api 鏈接本地數據庫欄目 SQL 简体版

原文原文鏈接

最近在公司的項目中所用到的一個模塊。經過百度地圖API和本地數據庫所鏈接起來。在顯示的百度地圖中所出現的標記點都是本地數據庫中保存的記錄。javascript

因爲是剛剛畢業，在公司作ASP.NET才半年的光景，因此語言表達和組織上都沒有各位前輩那麼流暢，並且是小弟第一篇博文，仍是請各位多多指點。html

首先先建數據庫的表。由於只是一個很小的測試案例，因此只用到了三個字段，其中Point字段是保存經緯度，Title字段是保存標記點的名稱。java

接下來作一個添加頁面。在添加頁面根據所輸名稱和地址來獲取其在百度地圖上的經緯度。而後經過訪問數據庫，能夠將標記點的信息和經緯度保存在數據表中。jquery

<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>
    &nbsp;<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的查詢關鍵就是經緯度。因此獲取經緯度並添加到數據庫中是可否查詢出相對應標記點的關鍵。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();

        }
    }