两行代码在任意页面实现谷歌卫星图
2007-06-02 02:02:20   来源:   评论:0 点击:

这两天我在一个程序中需要用到谷歌卫星地图,但是因为API太过于复杂,于是我自己总结出一个简化版本来,只需要两行JS代码即可在任意页面中实现


首先建立一个数据库,名字就叫 map_international

字段


id 自增长 主键

axis_x 单精度
axis_y 单精度
address_name UNICODE文本 16字长
about UNICODE文本 6
这两天我在一个程序中需要用到谷歌卫星地图,但是因为API太过于复杂,于是我自己总结出一个简化版本来,只需要两行JS代码即可在任意页面中实现


首先建立一个数据库,名字就叫 map_international

字段


id 自增长 主键

axis_x 单精度
axis_y 单精度
address_name UNICODE文本 16字长
about UNICODE文本 64字长

字段说明:

id:自己会增长,不用我们填写


axis_x:经度,如 -22.342231

axis_y:纬度

address_name:地名,如“悉尼市”,十六个字基本够用

about:简介,如“悉尼市位于澳大利亚....” ,六十四个字基本够用


-----------------------------------------------------------
数据库设置完毕,随便找个地标填写一下,例如:


29.97595571315068,31.13193064301058,吉萨金字塔,位于埃及尼罗河三角洲,5000年的历史......


建立一个ASP.NET文件,文件全部内容如下:
<%@ Page Language="Jscript" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data.OleDb" %>

<script runat="server">

/*

默认地图大小是长 480,宽460

可以通过 w和h参数来动态设定大小
w和h两个参数是可选的
例如:

mapload.aspx?id=1&key=abcdefghijklnm&w=320&h=240 表示窗口宽度是 320 高度是 240

*/


function Page_Load(){


var axis_x:String = "", axis_y:String = "", name:String = "", about:String = "",width:String = "480",height:String = "460";

if (Request.QueryString["w"] != null)
{
width = Request.QueryString["w"].ToString();
}

if (Request.QueryString["h"] != null)
{
height = Request.QueryString["h"].ToString();
}

var key:String = Request.QueryString["key"].ToString();
var dr:OleDbDataReader;
var cmd:OleDbCommand;
var adp:OleDbDataAdapter;
var conn:OleDbConnection;
var connStr:StringBuilder;
var id:int;

//安全过滤,保证不受SQL注入攻击
try
{
id = int.Parse(Request.QueryString["id"].ToString());
}
catch(e)
{
Response.End();
return;
}

//SQL Server 数据库
connStr = new StringBuilder("provider=SQLOleDb;sever=localhost;uid=kvspas;password=密码;database=数据库名");

//ACCESS 数据库
//connStr = new StringBuilder("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=");
//connStr.Append(Server.MapPath("map.mdb"));

conn = new OleDbConnection(connStr.ToString());

cmd = new OleDbCommand("SELECT * FROM map_international WHERE id = " + id,conn);

conn.Open();

try
{
dr = cmd.ExecuteReader();

while(dr.Read())
{
axis_x = dr["axis_x"].ToString();
axis_y = dr["axis_y"].ToString();
name = dr["address_name"].ToString();
about = dr["about"].ToString();
}
}
catch(e){}
finally
{
dr.Close();
conn.Close();
}

Response.Write("google_map_key =\""+key+"\";loadMaps("+axis_x+","+axis_y+",\""+name+"\","+width+","+height+");");

}
</script>
-------------------------
好了,导入
<script type="text/javascript" src=http://www.xker.com/page/e2007/1029/"http:/www.cnblogs.com/Files/kvspas/google-map.js"></script>
<script type="text/javascript" src=http://www.xker.com/page/e2007/1029/"http:/上面那个asp.net文件名.aspx?id=1&key=你的谷歌地图API的KEY"></script>

如果不想用asp.net和数据库,你也可以这么做:

<script type="text/javascript" src=http://www.xker.com/page/e2007/1029/"http:/www.cnblogs.com/Files/kvspas/google-map.js"></script>
<script type="text/javascript">
//<!--
//下面的一行修改成你自己的KEY
google_map_key = "ABQIAAAAWERdBboHQYPVZJOtJA8nMRTLyvHy2O1xzwu9As5J_TYbuxW7WxSOH6DCZdrClm8W38PMVlYBExCWrw";
loadMaps(29.97595571315068,31.13193064301058,"吉萨金字塔",400,300);
//-->
</script>

相关热词搜索:两行代码在任意页面实现谷歌卫星图

上一篇:关于Javascript中的事件--Event对象
下一篇:JS函数实现鼠标指向后带图片的提示效果

分享到: 收藏