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.效果图如下: