基于ASP.NET技术将数据库中坐标点数据呈现到GOOGLE地图上 (google map开发高级篇)
2014-10-22 17:09
253 查看
本文主要记录了将数据库中坐标点数据呈现到GOOGLE地图上的相关代码，本文主要用到的技术有asp.net、jquery、google map api等。废话不多说代码如下：
1、 页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="LdConsole.Web.GoogleMap" %>
<!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">
<title></title>
<script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAA48kTsSent7VKDiynLll5-BSenMbw3-kZLokidiRzbXMRfaqj2RTxeyIWvnSmTZOhXWzCeitYb-2Bng"
type="text/javascript"></script>
<script src="../Js/lib/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var CollectorName = "";
function adjustLight() {
var text = document.getElementById('test').value;
$("#message").html("调整亮度成功！"+text);
}
function initialize() {
//创建地图对象
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
//jquery读取数据库灯杆信息，并创建地图标记
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker, "click", function () {
//在标签里面生成测量点信息（灯泡）
var myHtml = "亮度值：<input id=\"test\"> <input type=\"button\" onClick=\"adjustLight()\" value=\"调整亮度\">";
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
//生成灯杆地图标记
var queryString = "1=1";
var tmp = "";
$.ajax({
type: "get",
dataType: "json",
url: 'ServerAjax.ashx?method=GetMapFOI&queryString=' + queryString,
data: "tmp=" + tmp,
complete: function () { $("#load").hide(); }, //
success: function (msg) {//
var data = msg.table;
$.each(data, function (i, n) {
var latlng = new GLatLng(n.Longitude, n.Latitude);
map.addOverlay(createMarker(latlng, i + 1));
});
}
});
//
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px">
</div>
<div id="message">
</div>
</body>
</html>
2、 后台代码：
新建ServerAjax.ashx文件，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI;
namespace LdConsole.Web
{
/// <summary>
/// ServerAjax 的摘要说明
/// </summary>
public class ServerAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string method = System.Web.HttpContext.Current.Request.QueryString["method"].Trim();
string queryString = System.Web.HttpContext.Current.Request.QueryString["queryString"].Trim();
switch (method)
{
case "GetMapFOI"://生成地图标记
context.Response.Write(GetMapFOI(queryString));
break;
}
}
//根据灯杆库里的数据生成地图上灯杆标记 QueryString为查询筛选条件
private String GetMapFOI(string queryString)
{
string sql;
sql = "select * from tbCollector where " + queryString;
string dbfile = ConfigurationManager.ConnectionStrings["KwstuConn"].ToString();
SqlConnection conn = new SqlConnection(dbfile);
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
DataTable dt = new DataTable("table");
da.Fill(dt);
return DataTable2Json(dt);
}
//生成Json数据格式方法
private string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append(dt.TableName);
jsonBuilder.Append("\":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(this.JsonStringFormat(dt.Rows[i][j].ToString()));
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
//Json数据源字符串格式化方法 防止返回的Json数据中有非法字符造成程序出错
public string JsonStringFormat(string JsonString)
{
return JsonString.Trim().Replace("\"", "\\\"").Replace("\\", "/").Replace("\r\n", "").Replace("\r", "").Replace("\r\r", "").Replace("\n", "").Replace("\n\r", "");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
1、 页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="LdConsole.Web.GoogleMap" %>
<!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">
<title></title>
<script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAA48kTsSent7VKDiynLll5-BSenMbw3-kZLokidiRzbXMRfaqj2RTxeyIWvnSmTZOhXWzCeitYb-2Bng"
type="text/javascript"></script>
<script src="../Js/lib/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var CollectorName = "";
function adjustLight() {
var text = document.getElementById('test').value;
$("#message").html("调整亮度成功！"+text);
}
function initialize() {
//创建地图对象
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
//jquery读取数据库灯杆信息，并创建地图标记
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker, "click", function () {
//在标签里面生成测量点信息（灯泡）
var myHtml = "亮度值：<input id=\"test\"> <input type=\"button\" onClick=\"adjustLight()\" value=\"调整亮度\">";
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
//生成灯杆地图标记
var queryString = "1=1";
var tmp = "";
$.ajax({
type: "get",
dataType: "json",
url: 'ServerAjax.ashx?method=GetMapFOI&queryString=' + queryString,
data: "tmp=" + tmp,
complete: function () { $("#load").hide(); }, //
success: function (msg) {//
var data = msg.table;
$.each(data, function (i, n) {
var latlng = new GLatLng(n.Longitude, n.Latitude);
map.addOverlay(createMarker(latlng, i + 1));
});
}
});
//
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px">
</div>
<div id="message">
</div>
</body>
</html>
2、 后台代码：
新建ServerAjax.ashx文件，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI;
namespace LdConsole.Web
{
/// <summary>
/// ServerAjax 的摘要说明
/// </summary>
public class ServerAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string method = System.Web.HttpContext.Current.Request.QueryString["method"].Trim();
string queryString = System.Web.HttpContext.Current.Request.QueryString["queryString"].Trim();
switch (method)
{
case "GetMapFOI"://生成地图标记
context.Response.Write(GetMapFOI(queryString));
break;
}
}
//根据灯杆库里的数据生成地图上灯杆标记 QueryString为查询筛选条件
private String GetMapFOI(string queryString)
{
string sql;
sql = "select * from tbCollector where " + queryString;
string dbfile = ConfigurationManager.ConnectionStrings["KwstuConn"].ToString();
SqlConnection conn = new SqlConnection(dbfile);
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
DataTable dt = new DataTable("table");
da.Fill(dt);
return DataTable2Json(dt);
}
//生成Json数据格式方法
private string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append(dt.TableName);
jsonBuilder.Append("\":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(this.JsonStringFormat(dt.Rows[i][j].ToString()));
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
//Json数据源字符串格式化方法 防止返回的Json数据中有非法字符造成程序出错
public string JsonStringFormat(string JsonString)
{
return JsonString.Trim().Replace("\"", "\\\"").Replace("\\", "/").Replace("\r\n", "").Replace("\r", "").Replace("\r\r", "").Replace("\n", "").Replace("\n\r", "");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于ArcGIS10.0和Oracle10g的空间数据管理平台（C#开发）-数据库设计
- 数据存储之SQLite -- 如何查看数据库文件（基于AS开发工具）
- 基于ArcGIS10.0和Oracle10g的空间数据管理平台（C#开发）-数据库设计
- 基于ArcGIS10.0和Oracle10g的空间数据管理平台（C#开发）-数据库设计
- 基于MySQL的高性能数据库应用开发
- 基于国产数据库DM4的JDBC3.0开发
- vc开发数据库应用中的常用数据转换
- 基于空间数据库的数据挖掘技术
- 基于Grove的.NET应用程序开发提示1--数据库主键设置问题
- 基于空间数据库的数据挖掘技术
- jdbc连接各种数据库方式列表 And Servlet开发中JDBC的高级应用
- 基于JSON的高级AJAX开发技术
- 发现数据对象－－数据库开发的关键
- 基于树型结构数据的关系数据库存储与网页显示的研究 推荐
- SQL2K数据库开发五之表操作管理用户定义的数据类型
- 终于可以让Flash基于C#完美操作数据库了,想开发全flash的,全部读取数据库的个人BLOG...
- 基于关系数据库系统链式存储的树型结构数据，求某结点下的子树所有结点算法(t-sql语言实现)
- Visual C++ 数据库开发－高级篇
- 数据库应用程序开发中图像数据的存取技术
- 本文是笔者根据数据库编程经验，利用C++语言的模板、继承、授权、多态等面向对象特性，借鉴命令模式，实现了对象在关系数据中的存储，降低应用系统与数据库之间的耦合，提高开发效率。