本例項演示藉助WebService、Ajax技術和回撥函式，從MSSQL資料庫中獲取所需資料，並用JavaScript語言將資料結果顯示到網頁地圖上。

1、WebService

       （1）在工具箱的Ajax Extentions下面找到ScriptManager控制元件，拖到網頁上，右鍵屬性，開啟Services集合，將Path設為WebService.asmx，如下圖所示：

       （2）開啟App_Code中的WebService.cs，一定要做到取消對[System.Web.Script.Services.ScriptService]行的註釋，然後開始編寫WebService，該例項寫一個從NMET資料庫的school表中獲取資訊（包括學校名稱，經緯度等），將結果湊成一個JSON格式的字串。

[WebMethod]
    public string GetSchool()
    {
        string SQL = "SELECT * FROM SCHOOL";
        string st;
        MyDBase DB = new MyDBase(".", "NMET");
        SqlDataReader RD = DB.DBDataReader(SQL);
        st = "[";
        while (RD.Read())
        {
            st = st + "{sname:\'" + RD["sname"].ToString().Trim() + "\',lnglat:[" + RD["LNG"].ToString().Trim() + "," + RD["LAT"].ToString().Trim() + "],info:\'"+RD["SAdd"].ToString().Trim()+"\'},";
        }
        int n = st.Length - 1;
        st = st.Substring(0, n);
        st = st + "]";
        DB.DBClose();
        return st;
    }
 

       （1）採用eval()函式，將JSON格式字串轉化為物件；

       （2）將WebService中獲取的學校名稱新增到下拉列表框中；

       （3）將座標資訊以點的形式顯示到天地圖上；

       （4）對點新增滑鼠點選和滑鼠移動事件。

function init() 
{
    var S = new WebService();
    S.GetSchool(getschool);
}
//回撥函式
function getschool(e) {
    var LNG, LAT;
    var s;
    s = eval('(' + e + ')');
    LNG = parseFloat(s[0].lnglat[0]);
    LAT = parseFloat(s[0].lnglat[1]);
    var lnglats = new Array();
    var names = new Array();
    var URLs = new Array();
    var INFO = new Array();
    var infoWin;
    document.getElementById("school").options.length = 0;
    for (var i = 0; i < s.length; i++) 
    {
        var lat, lng;
        lng = parseFloat(s[i].lnglat[0]);
        lat = parseFloat(s[i].lnglat[1]);
        lnglats[i] = new TLngLat(lng, lat);
        names[i] = String(s[i].sname);
        URLs[i] = String(s[i].url);
        INFO[i] = String(s[i].info);
        document.getElementById("school").options.add(new Option(names[i], names[i]));
    }
    for (var i = 0; i < lnglats.length; i++) 
    {
        (
                function(n) {
                    var marker = new TMarker(lnglats[n]);
                    map.addOverLay(marker);
                    TEvent.addListener(marker, 'click', function() {
                        var truthBeTold = window.confirm("請你選擇：點選“確定”進行地圖定位，點選“取消”進入學校主頁")
                        if (truthBeTold) Locate(s[n].sname);
                        else window.open(URLs[n]);
                    });

                    TEvent.addListener(marker, 'click', function() {
                        Locate(s[n].sname); //點選進行學校地圖定位
                    });
                    TEvent.addListener(marker, 'mouseover', function() {
                        infoWin = marker.openInfoWinHtml("這裡是“" + names[n] + "”," + INFO[n] + "，請點選！");
                        //infoWin.setTitle("提示");
                        //infoWin.setLabel('<a href="http://www.baidu.com" target="_blank">URLs[n]</a>');
                        //infoWin.closeInfoWindowWithMouse(); //該方法不太靈活，自編關閉函式
                    });
                    TEvent.addListener(marker, 'mouseout', function() {
                        infoWin.closeInfoWindow();
                    });
                }
         )(i);
    }
}
 

3、結果展示