将Google Map 与ASP.NET AJAX 扩展集成

1. 问题的提出：
   从所周知，Google map 提供的API有其自身的Ajax实现，如果要将Google Map API 嵌入到Asp.net Ajax 扩展的网页如何实现Google Map API 与Asp.net Ajax 客户端扩展库协调是必须考虑的问题。

2. 本文的目的：
   将Google Map 嵌入到一个Asp.net Ajax Enabled 的网页中，利用Asp.net Ajax客户端扩展库 Sys.Net.WebRequest 对象，从服务器请求XML数据，并将XML数据显示在 Google Map 的 OverLay 上。


3. 实现方法：
   利用Asp.net Ajax客户端扩展库创建一个名为 GoogleMap.Map 对象。并将Google Map初始化已经撤销对象处理封装在这个对象中。

4 .客户端代码：

    <script type="text/javascript">
        //<![CDATA[
       Type.registerNamespace("GoogleMap");
        GoogleMap.Map = function(element) 
        {
            GoogleMap.Map.initializeBase(this, [element]);
            this._mapCanvas = element;
            this._map = null;
            this._infoTimeElement = null;
            this._updateElement = null;
            this._url = null;
        }
        GoogleMap.Map.prototype = {
            initialize : function() {
                GoogleMap.Map.callBaseMethod(this, 'initialize');
                
                this._map = new GMap2(this._mapCanvas);
                this._map.addControl(new GLargeMapControl());
                this._map.setCenter(new GLatLng(29.47921866, 121.86541563), 12);
                this._map.setMapType(G_HYBRID_MAP);
                
                $addHandlers(this._updateElement, {'click': this.update}, this);
            }, 
            dispose : function() {
                $clearHandlers(this._updateElement);
                GUnload();
                this._map = null;
                GoogleMap.Map.callBaseMethod(this, 'dispose');
            }, 
            update: function() {
                var webRequest = new Sys.Net.WebRequest();
                webRequest.set_url(this._url);
                webRequest.add_completed(Function.createCallback(this.onSuccessedXML, this));
                webRequest.invoke();
            },
            onSuccessedXML : function(executor, eventArgs, context)
            {
                context._map.clearOverlays();
                if(executor.get_responseAvailable()) {
                    var xml = executor.get_xml();
                    var markers = xml.documentElement.getElementsByTagName('marker');
                    context._infoTimeElement.innerHTML = markers[0].getAttribute('t');
                    for(var i=1; i<markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng')));
                        var text = new Sys.StringBuilder(markers[i].getAttribute('name'));
                        text.append('<br />');
                        text.append( markers[i].getAttribute('txt'));
                        text.append('<br />');
                        text.append( markers[i].getAttribute('txt1'));
                        text.append('<br />');
                        text.append( markers[i].getAttribute('txt2'));
                        context._map.addOverlay(context.createMarker(point, text.toString()));
                    }
                }
            },
            createMarker : function(point, text) {
                var defaultIcon = new GIcon(G_DEFAULT_ICON);
                var m = new GMarker(point, {icon:defaultIcon});
                GEvent.addListener(m, 'click', function(){ m.openInfoWindowHtml(text); });
                return m;
            },
            get_infoTimeElement : function() {
                return this._infoTimeElement;
            },
            set_infoTimeElement : function(value) {
                this._infoTimeElement = value;
            },
            get_updateElement : function() {
                return this._updateElement;
            },
            set_updateElement : function(value) {
                this._updateElement = value;
            },
            get_url : function() {
                return this._url;
            },
            set_url : function(value) {
                this._url = value;
            }
        }
        GoogleMap.Map.registerClass('GoogleMap.Map', Sys.UI.Control);
        Sys.Application.add_init(pageInit);
        function pageInit()
        { 
            $create(GoogleMap.Map, 
                { 'updateElement': $get('refreshInfo'), 'infoTimeElement' : $get('ctl00_Content_pageInfo_LabelInfoTime'),  'url' : 'GMapBus.ashx'},
                {}, 
                {}, 
                $get('pageContent'));
        } 
        //]]>          
    </script>