2009年6月

一步步学习调用Google Map Api(二)

上次写了google地图api调用(一),也过了好一段时间了,今天来说说初始化地图后对地图的一些设置。

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&amp;hl=zh-CN" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_container"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_container" style="width: 500px; height: 300px"></div>
</body>
</html>
[/code]

上面我们只是对地图的简单调用,并没有为地图设置一下配置。以下是一些可以调用的配置。

方法 返回值 说明
enableDragging() None 启用地图拖动(默认情况下启用)。
disableDragging() None 禁用地图拖动。
draggingEnabled() Boolean 当且仅当启用了地图拖动时,返回 true。
enableInfoWindow() None 启用地图上的信息窗口操作(默认情况下启用)。
disableInfoWindow() None 如果信息窗口处于打开状态,请关闭它并禁用打开新信息窗口。
infoWindowEnabled() Boolean 当且仅当启用了信息窗口时,返回 true。
enableDoubleClickZoom() None 启用双击缩放地图(默认情况下启用)。
disableDoubleClickZoom() None 禁用双击缩放地图。
doubleClickZoomEnabled() Boolean 当且仅当启用了双击缩放地图时,返回 true。
enableContinuousZoom() None 启用选择浏览器的连续平滑缩放(默认情况下禁用)。
disableContinuousZoom() None 禁用连续平滑缩放。
continuousZoomEnabled() Boolean 如果启用了连续平滑缩放,则返回 true。
enableGoogleBar() None 为地图启用集成搜索控件 GoogleBar。如果启用,该控件会取代默认的“由 Google 强力驱动”徽标。请注意,该控件默认情况下未启用。
disableGoogleBar() None 禁用 GoogleBar 集成搜索控件。如果禁用,默认的“由 Google 强力驱动”徽标会占据以前放置此控件的位置。请注意,该控件已经默认禁用。
enableScrollWheelZoom() None 启用使用鼠标滚轮缩放。注意:默认情况下禁用滚轮缩放。
disableScrollWheelZoom() None 禁用使用鼠标滚轮缩放。注意:默认情况下禁用滚轮缩放。
scrollWheelZoomEnabled() Boolean 返回一个表示是否启用滚轮缩放的布尔值。

例如:调用enableDragging()就可以是地图可以拖动:

[code lang="js"]
var map = new GMap2(document.getElementById(&amp;quot;map_container&amp;quot;));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.enableDragging(); //使地图可以拖动,默认是启用的
[/code]

下面是几个默认没有开启,但比较常用的配置:

[code lang="js"]
map.enableScrollWheelZoom(); //鼠标滑轮缩放地图
map.enableContinuousZoom(); //放大缩小时启用动画效果
map.doubleClickZoomEnabled() //鼠标双击放大地图
[/code]

配置了地图后还可以为地图添加一些控件。比较常见的两个控件:方向盘控件(向东南西北移动地图的控件)和控制缩放级别控件,貌似官方api就提供了这两个控件(方向盘控件有一个大的和一个小的),当然你也可以实现接口,自己写控件,如写个美化的方向盘控件和缩放级别控件。下面是添加这两个控件的代码:

[code lang="js"]
map.addControl(new GLargeMapControl());        //添加一个大的方向盘控件
map.addControl(new GScaleControl());           //添加一个缩放级别控件
[/code]

还可以添加一个小的方向盘控件,大和小二选一:

[code lang="js"]
map.addControl(new GSmallMapControl());
[/code]

这样就是一个比较完整的地图了,大家可以试试。下次说说比较强大的自定义地图类型。

动态加载并运行js文件或者代码段

以前写过动态加载js文件的文章,但总是觉得不是很完美,有时候载入的js文件没法运行,今天发现一个动态载入js代码块的方法,载入的代码块可以运行。

[code lang="js"]
var scriptFrag = document.createElement(&amp;quot;script&amp;quot;);
scriptFrag.text=&amp;quot;alert('ss');&amp;quot; //你的代码;
document.body.appendChild(script);
[/code]

注意scriptFrag的代码块是放在text这个属性里面,我以前一直没有发现要这么写script里面的内容。上面的代码在火狐里面会弹出两次alert,也就是执行了两次,不知道是什么原因。

一步步学习调用Google Map Api(一)

Google Map API为我们提供了非常强大的地图定制功能,一步步来学习Google Map的调用方法,最终实现一个基于Google Map的路况地图,后台用asp.net实现。效果图如下:

地图上的红绿橙三色线是根据路线、路况信息实时生成的。这个以后再谈,我们先从简单的Google Map API的调用说起。Google Map Api 3.0之前是要申请Key,3.0以后好像不用申请Key了,直接引入js文件就可以调用了。下面我们用到的是GMap2(即API2.X,具体什么版本我也不是很清楚了)。

[code lang="html"]
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>
[/code]

显示Google地图也很简单了:

[code lang="html"]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google 地图 JavaScript API 示例: 简单的地图</title>

<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>

<script type="text/javascript">

function initialize() {

var map = new GMap2(document.getElementById("map_container"));

map.setCenter(new GLatLng(39.917, 116.397), 14);

}

</script>

</head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_container" style="width: 500px; height: 300px"></div>

</body>

</html>
[/code]

先实例化一个GMap2对象,提供一个Dom作为地图的容器,地图将会在这个Dom中显示,这个参数是必须的。当然实例化GMap2对象也可以传入配置参数,如:var map=new GMap2(document.getElementById("map_container"), opts?:GMapOptions),opts参数为可选。之后我们为地图设置一个中心点,即中心的经纬度,还有初始缩放级别,这里为14。只需这两句就可以显示一个很酷的Google地图了。

最后说一下地图的宽度和高度,地图的宽和高是根据地图容器的宽高来确定的。想显示多大的地图,只需调整map_container这个容器的宽高就行了。下次说说地图的一些初始设置,如鼠标滚轮缩放地图、双击缩放地图、地图左上角的方向盘等。

用javascript实现直接弹出保存文件的系统对话框

一个图片相关的网站,为了让网友下载图片方便快捷,当点击一个保存图片的链接时,直接弹出系统的保存文件的对话框。实现代码如下:

[code lang="html"]
<img src="upload/200906081725365867.gif" id="imgIn" />
<a href="#" onclick="return saveFace(imgIn.src);">保存到电脑</a>
<iframe name="imgFrame" onload="runSave()" style="display:none;"></iframe>

<script type="text/javascript">
function runSave(){
if (imgFrame.location != "about:blank") window.imgFrame.document.execCommand("SaveAs");
}
function saveFace(url){
if(window.imgFrame &amp;&amp; url) window.imgFrame.location=url;
return false;
}
</script>
[/code]

说明:利用iframe的onload事件,把iframe的location设置为图片的src,然后再调用execCommand("SaveAs")执行保存。这样就很方便的实现了直接弹出保存文件的系统对话框。

IIS6下运行MVC项目,请求链接带扩展名.aspx

想用MVC做个网站玩玩,MVC默认项目的链接形式是不带扩展名的,但服务器的环境是.net2.0和iis6,想用没有扩展名的请求路径形式,需要加通配符映射,这样就会把网站的所有文件都交给了asp.net处理,有点浪费资源,想想还是放弃了,还是加上.aspx的扩展名,服务器上再用isapi_rewrite重写算了,完全可以实现相同的效果。当我把global.asxa.cs里面的routes.MapRoute改为如下时

[code lang="csharp"]
routes.MapRoute(
&amp;quot;Default&amp;quot;, // Route name
&amp;quot;{controller}.aspx/{action}/{id}&amp;quot;, // URL with parameters
new { controller = &amp;quot;Home&amp;quot;, action = &amp;quot;Index&amp;quot;, id = &amp;quot;&amp;quot; } // Parameter defaults
);
[/code]

访问首页是总是出现“传入的请求不与任何路由匹配。”的错误,访问首页时Request.Path="/",Request.Path与{controller}.aspx/{action}/{id}确实不匹配,但是为什么我没有加.aspx的时候Request.Path就可以匹配{controller}/{action}/{id}它呢?{}里面的东西没有传值的话可以忽略,但还有两个/,怎么就能匹配了?有时间去看看内部的实现代码,现在也不想管那么多了。加了一个MapRoute解决问题。

[code lang="csharp"]
routes.MapRoute(
&amp;quot;DefaultPage&amp;quot;, // Route name
&amp;quot;&amp;quot;, // 新加一个链接匹配字符串,为空就行了
new { controller = &amp;quot;Home&amp;quot;, action = &amp;quot;Index&amp;quot;, id = &amp;quot;&amp;quot; } // Parameter defaults
);

routes.MapRoute(
&amp;quot;Default&amp;quot;, // Route name
&amp;quot;{controller}.aspx/{action}/{id}&amp;quot;, // URL with parameters
new { controller = &amp;quot;Home&amp;quot;, action = &amp;quot;Index&amp;quot;, id = &amp;quot;&amp;quot; } // Parameter defaults
);
[/code]