Goole Map API V3動態加載數據庫中的座標信息並添加標記（ASP.NET）

Goole Map API動態加載數據庫的數據來展示地圖，困擾了一天，終於解決了，現在將實現方式分享出來，希望能夠對需要的童鞋們有所幫助~~~

 

1.數據庫中查詢座標信息，並生成XML格式，源碼如下（連接數據庫部分省略）

System.Text.StringBuilder sMark = new System.Text.StringBuilder();

        Response.Clear();
        Response.Charset = "utf-8";
        Response.ContentType = "text/xml";

        sMark.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>"); 
        if (dt != null)
        {
            sMark.Append("<markers>");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string lat = "\"" + dt.Rows[i]["Coordinate_X"].ToString() + "\"";
                string lng = "\"" + dt.Rows[i]["Coordinate_Y"].ToString() + "\"";

                sMark.Append("<marker lat="+lat+" lng="+lng+" />");
            }
            sMark.Append("</markers>");
        }
        Response.Write(sMark.ToString());
        HttpContext.Current.ApplicationInstance.CompleteRequest();

生成的文件格式如下：

   

2.加載生成的JS方法

function createXmlHttpRequest() {
try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
} catch (e) {
   changeStatus(e);
}
return null;
};

function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
   return false;
}

request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if (status == 200) {
         callback(request.responseXML, request.status);
         //callback(request.responseText, request.status);
       request.onreadystatechange = function() {};
     }
   }
}
request.open('GET', url, true);
try {
   request.send(null);
} catch (e) {
   changeStatus(e);
}
};

3.展示地圖頁面的JS方法

<script type="text/javascript">
        function initialize() {
            var myLatlng = new google.maps.LatLng(31.38, 120.98);
            //var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom:12,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            //downloadUrl("1.xml", function (data) {
            downloadUrl("ShowMap.aspx", function (data) {
                //alert(data);
                var markers = data.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                    var marker = new google.maps.Marker({ position: latlng, map: map });
                }
            });
        }
</script>

4.效果圖如下：