新作品：可以自由编辑的Google地图，700行javascript+70行php

以前在龙骑士城堡提过一种想法，就是用GOOGLE MAPS来做桌面游戏玩家的主题地图。当时推荐的是EEMAP的服务，然则这个网站的注册一直需要邀请码，很不方便，而且界面难看，速度也很慢……

当时就想过自己来做一个GOOGLE MAPS API的应用，但一直没时间看API文档。这几天总算有空闲（辞职就是好哑），把想象中的东西基本上做出来了，我把它叫作Free Map Folio v1.0（取自DND设定集的名字），可以像维基百科那样自由编辑，前端是静态的HTML，数据库用xml，方便部署，而交互操作的程序完全用Javascirpt来写，只需要打开一个HTML页面，然后整个使用过程都不需要刷新页面，也不需要从外部获取数据（只用AJAX提交数据）。

演示：桌面游戏玩家主题地图（乱加东西要记得删掉）——

查看全文!

以前在龙骑士城堡提过一种想法，就是用GOOGLE MAPS来做桌面游戏玩家的主题地图。当时推荐的是EEMAP的服务，然则这个网站的注册一直需要邀请码，很不方便，而且界面难看，速度也很慢……

当时就想过自己来做一个GOOGLE MAPS API的应用，但一直没时间看API文档。这几天总算有空闲（辞职就是好哑），把想象中的东西基本上做出来了，我把它叫作Free Map Folio v1.0（取自DND设定集的名字），可以像维基百科那样自由编辑，前端是静态的HTML，数据库用xml，方便部署，而交互操作的程序完全用Javascirpt来写，只需要打开一个HTML页面，然后整个使用过程都不需要刷新页面，也不需要从外部获取数据（只用AJAX提交数据）。

演示：桌面游戏玩家主题地图（乱加东西要记得删掉）——http://www.ntrpg.org/yy/maps/





Javascirpt的主要代码有700行，都写在一个对象里(yymap)，我本来想把每个单独的功能都封装起来，避免重复代码（DRY原则？），不过后来页面右侧栏加入了“地点列表”之后，程序就改复杂了……………以后有空要做一下重构……

用户只需要访问一个静态的HTML页面，唯一一次从外部获取数据是在地图加载的时候，用了API提供的XmlHttpRequest对象，非常方便，比如GXml.parse可以把responseText获得的文本转换成XML DOM。不过用GXmlHttp和GDownloadUrl的时候，IE7都会遇到一个缓存问题（IE6没试过）：刷新页面后，不会重新下载XML文件，因此页面上的数据不会更新。解决方法是在xml文件的地址后面加随机参数（感谢tinyfool的帮助）：

var ramnum = parseInt(100000*Math.random());

var request = GXmlHttp.create();
request.open("GET", "db.xml?x="+ramnum, true);

标记（Marker）的样式可以自定义，所以我做了一个选择图标的功能，先建立所有图标的基本属性（yymap.baseIcon），包括阴影图片和各种尺寸，然后在创建新标记时，根据用户选择的图标，把地址传给icon.image就行了。其实还可以做一个自定义图片的功能，允许用户在编辑器里上传自己的图片（比如照片）当作图标，只是必须把图片处理成固定大小的32位PNG……

点击标记弹出的信息窗口是最麻烦的东西，因为页面里同时只能存在一个信息窗口，而信息窗口里的内容也不能保存在标记的对象里，所以要修改某个标记对应的信息窗内容，就只能修改它的点击事件：

GEvent.addListener(marker, "click", function() 

{
   yymap.whenClickMarker(marker,info,point,icon.image);

});

我在点击事件里传了4个参数：点击的标记对象 , 信息窗的内容, 标记的经纬度, 标记使用的图标， 除了用来显示信息窗，也是为了把它们传给全局变量（因为编辑这个标记的时候会用到）。

为了让右侧栏列表与地图上的图标一一对应，我在列表的每个链接上设了跟标记对应的ID，每次做添加、编辑或删除的操作时，除了修改标记本身的点击事件，还要用ID找到列表上对应的链接，修改链接的点击事件…………总之，感觉这个侧栏列表很添乱……却又是必要的功能……

在我写这篇文章时，还有一个搜索地名的功能没做好。本来API提供了地理译码的功能，可以把符合格式的地名转换成JSON数据（用JS对象来传递数据的格式），但这么方便的东西我却享受不了——地理译码还没有支持中国的地名…………在地图上就能很明显的看到：周围日本、印度，都有详细的城市名字，放大后还有交通信息，而中国是一片空白…………

因此对于不熟悉地理的用户来说，要在这样的中国地图上找到某个城市可能太难了，搜索地名是必须的功能。由于没有地理译码，目前使用GOOGLE MAPS API的网站，比如EEMAP，都是自己建立地名和经纬度对应的数据库。我找到了一个很全的“乡镇级中国行政区划地标”，是GOOGLE EARTH用的KMZ文件，但其实就是压缩过的XML，用WINRAR打开就能看到一个KML文件，可以直接拿来当搜索数据库。我考虑过两种实现方法：把用户输入的中文地名用AJAX发给PHP，让PHP搜索这个XML文件里匹配的标签，然后返回相应的经纬度；或者直接用GXmlHttp下载XML，然后用JS的DOM方法来搜索相应的标签，第二种方法很合我的胃口，不需要借道PHP，遗憾的是…………这意味着搜索时要用AJAX获得19M的XML数据……

更新：地名搜索已经完成了，模糊搜索范围包括省会、地级市、县城、村镇……足行匹配，搜索对象在KML文件里排名越靠后，搜索时间越长，不过最多应该不超过5秒……

我刚才测试了一下，搜索不到结果时4.36s，搜索最后一个地名“番阳”需要4.02s，搜索北京1.16s，搜索克拉玛依只需要华丽的328ms

php是由以前的同事Skylin帮忙写的，由于PHP只负责根据AJAX提交的数据，修改XML文件，所以内容很少……然则Skylin不肯用PHP5自带的XML类，而是自己写正则……最后代码只有几十行……果然是高手风范……

比如，这是remove.php:

<?php
include "./globals.php";
$file_content = join('',file("../db.xml"));

if(preg_match("/<marker>\r\n<id>".intval($_POST['id'])."<\/id>.*<\/marker>\r\n\r\n/isU",$file_content,$array))

{
    
    $file_content = str_replace($array[0],'',$file_content);

}

$fp = fopen("../db.xml","w+");

flock($fp,LOCK_EX);
fputs($fp,$file_content);

flock($fp,LOCK_UN);
fclose($fp);
?>

不过正则也容易出现问题，例如：在我最初做的XML数据库里面，标签的前面都有缩进，大概因为有的缩进是TAB，有的是空格，导致正则一直出错，只好把XML里的缩进全部删掉了……

目前已经全部完工，可能还有一些小BUG需要修改，比如：在简介里输入全角字符（比如·和——），会导致后面的字符都无法保存。P.S. 单引号、双引号和"&"容易引起JS错误，我把它们都屏蔽了-_____-b

YY流界面之动态图标导航栏

做这个导航栏的初衷，是想在公司产品的后台界面里，模仿MAC OS X系统的dock效果，所谓dock，就是OS X桌面底部那条显眼的工具栏，我的UBUNTU桌面里也有类似的效果……

实际上我也没用过MAC，所以是凭想象做的，演示页面在此：
http://www.ntrpg.org/yy/yy/demo/iconmenu.htm

右上角的导航栏是默认的效果，鼠标滑过时图标变大，会推挤旁边的图标。

下面第一排去掉了推挤效果。

第二排加入了左右移动的功能，图标的数量远远超出页面的宽度，只显示其中一部分，在导航栏上左右移动鼠标时，整个导航栏会向相反方向滑动，显示出隐藏的图标。

第三排把移动的操作改到了左右两侧的箭头，鼠标停留在箭头上时，导航栏就会向对应的方向滑动，鼠标离开箭头时滑动停止，当滑动到最末端的图标时，自动停止。

查看全文!

做这个导航栏的初衷，是想在公司产品的后台界面里，模仿MAC OS X系统的dock效果，所谓dock，就是OS X桌面底部那条显眼的工具栏，我的UBUNTU桌面里也有类似的效果……


实际上我也没用过MAC，所以是凭想象做的，演示页面在此：
http://www.ntrpg.org/yy/yy/demo/iconmenu.htm

右上角的导航栏是默认的效果，鼠标滑过时图标变大，会推挤旁边的图标。

下面第一排去掉了推挤效果。

第二排加入了左右移动的功能，图标的数量远远超出页面的宽度，只显示其中一部分，在导航栏上左右移动鼠标时，整个导航栏会向相反方向滑动，显示出隐藏的图标。

第三排把移动的操作改到了左右两侧的箭头，鼠标停留在箭头上时，导航栏就会向对应的方向滑动，鼠标离开箭头时滑动停止，当滑动到最末端的图标时，自动停止。

先实现导航栏的默认效果，HTML如下：

<!-- ICON menu  --> 
<div class="iconbarout">
   
 <div id="iconbar0" class="iconbar" >

  <ul style="margin-left:0px;">
    
  <li>
   <a href="#">

    <img src="images/icon7.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />

    <span>link7</span>
   </a>
  </li>


  <li>
   <a href="#">

    <img src="images/icon6.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />

    <span>link6</span>
   </a>
  </li>

   
  </ul>
 </div>

   
</div>  
<!-- ICON menu end  -->

为了追求立体感，图标不能有背景色，所以必须用透明PNG图片，这里用<img>标签插入图片，是因为要实现图标的缩小放大效果（CSS背景里的图片只能控制位置，不能改变大小），图标的长宽要写在元素的style属性里，方便JS程序控制。

由于IE6不支持PNG的透明背景，必须用滤镜来做HACK才能达到一样的效果，而滤镜只能写在CSS的背景属性里…………为了解决这个矛盾，就要依靠JS了：

function alphaPNG(png)
{
 var aVersion=navigator.appVersion.split("MSIE");

 var version=parseInt(aVersion[1]);
 var pp=png.parentNode;

 if( (version>=5.5) && (version<7) && (document.body.filters) )

 {
  var mout=png.onmouseout.toString();

  var mover=png.onmouseover.toString();

  alphaHTML="<span style=\"cursor:pointer;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='"+png.src+"');display:block;width:"+png.style.width+";height:"+png.style.height+";\" onmouseover=\""+mover.substring(mover.indexOf("{")+1,mover.lastIndexOf("}"))+"\" onmouseout=\""+mout.substring(mout.indexOf("{")+1,mout.lastIndexOf("}"))+"\" ></span>";

  png.outerHTML=alphaHTML;
 }

}

这个函数已经写在图片的onload事件里了，会在IMG标签的内容加载完后触发（这个事件虽好，也不能到处乱用，根据伟大的犀牛书V5，onload只支持body, frameset, img），函数先判断浏览器类型和版本（IE7支持透明PNG），先创建一个span元素，IMG标签的所有属性、事件都原样COPY到SPAN上，而PNG图片则放到SPAN的背景里，用滤镜处理成透明，注意滤镜属性里必须要有sizingMethod=scale。最后用outerHTML（只有IE支持）把该IMG替换成span。

导航栏的样式：

/* icon menu */
.iconbarout
{
 width:770px;

 position:absolute;
 top:40px;right:10px;

}

.iconbar{
 overflow:hidden;
 float:left;

}

.iconbar li{
 float:right;
 padding:0px;

 width:auto;
 text-align:center;
 margin:0 16px 0 0px;

}
.iconbar li span{
 color:#333; 
 font-weight:600;

 width:auto;
 display:block;
 float:none;

 margin:0px auto;
}
.iconbar li a img{
 margin:0px auto;

 float:none;
}
.iconbar li a{
 text-align:center;

 float:none;
 margin:0px auto;
}
.iconbar li img{

 border:0px;
 float:left;
}

这样就在IE和Firefox里实现一样的视觉效果了（这里存在一个问题，为了保证图标放大后的清晰度，初始的图标都是缩小的，在IE7和Firefox里都会看到一点锯齿，而IE6由于用了滤镜，缩小的图标边缘仍然是平滑的-_____-b）

接下来做鼠标滑过的放大缩小效果。JS的动画效果一般是利用setTimeout或setInterval的延迟功能，反复循环来实现的。为了避免这些图标在运行函数时发生冲突，我把缩放的动画效果封装到了一个类里：

/* zoom class by Dexter.Yy
********************************************************/

function animeZoom(ico,gWidth,gHeight,nWidth,nHeight)

{
 this.png=ico;
 this.iheight=nHeight;

 this.iWidth=nWidth;
 this.goWidth=gWidth;
 this.goHeight=gHeight;

 this.rico;
}

animeZoom.prototype.zoomEvent=function()

{
 if(this.iWidth<this.goWidth)
 {
  this.goEnlarge();

 }
 else if(this.iWidth>this.goWidth)
 {

  this.goReduce();
 }

}

animeZoom.prototype.goEnlarge=function()

{
 this.png.style.width=this.goWidth+"px";

 this.png.style.height=this.goWidth+"px";

}

animeZoom.prototype.goReduce=function()
{
 var obj=this;

 var h=parseInt(this.png.style.height);

 var w=parseInt(this.png.style.width);

 if(w>this.goWidth)
 {
  this.png.style.width=w-2+"px";

  this.png.style.height=h-2+"px";

  this.rico=setTimeout(function(){obj.goReduce();},30);

 }
 else
 {
  window.clearTimeout(this.rico);

 }
}

使用时要传5个参数：目标对象、期望达到的宽度、期望达到的高度、原始宽度、原始高度，像这样：

function largeIcon(png)
{
 var lIco=new animeZoom(png,91,91,68,68);

 lIco.zoomEvent();
}

function reIcon(png)

{
 var rIco=new animeZoom(png,68,68,91,91);

 rIco.zoomEvent();
}

OK完工……如果是在FLASH里做这种推挤效果，可能还要写一大堆AS，但这里有CSS的浮动属性帮忙，就很省事……

YY流界面之三栏液态布局&圆角边框

在公司做了好几个项目的WEB前端开发工作，其实很早就想写一些技术心得，类似以前发的《[造车轮计划]今天写了一个右键菜单的JS类》，可惜……好罢这句话我已经重复过无数次了：太累 & 没时间。

今天终于整理了一部分以前写过的代码，我准备以后陆续在BLOG上发一些WEB交互界面方面的文章，并且逐步补充完善，争取凑出一套原创的控件库和JS效果库。如果你觉得这些东西对自己的开发有帮助，我当然非常欢迎你拿去自由使用，不过我也希望能收到反馈信息——比如你在开发中遇到的问题、或是你在这些代码基础上做的修改和补充——嗯，这也算是一种开源协议，比什么BSD什么阿帕契都要厚道罢……XD

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，这是我做的效果演示：

查看全文!

在公司做了好几个项目的WEB前端开发工作，其实很早就想写一些技术心得，类似以前发的《[造车轮计划]今天写了一个右键菜单的JS类》，可惜……好罢这句话我已经重复过无数次了：太累 & 没时间。

今天终于整理了一部分以前写过的代码，我准备以后陆续在BLOG上发一些WEB交互界面方面的文章，并且逐步补充完善，争取凑出一套原创的控件库和JS效果库。如果你觉得这些东西对自己的开发有帮助，我当然非常欢迎你拿去自由使用，不过我也希望能收到反馈信息——比如你在开发中遇到的问题、或是你在这些代码基础上做的修改和补充——嗯，这也算是一种开源协议，比什么BSD什么阿帕契都要厚道罢……XD

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，所谓“液态布局”，就是网页内容的宽度能随屏幕分辨率/浏览器的大小而改变，自动撑满。

根据我的经验……目前网页设计中最常见的还是采用固定宽度居中对齐的布局，也就是说当用户的分辨率提高时，页面左右会出现空白，强调用户体验的WEB2.0网站们翰注重个性的BLOG们，经常会针对这些空白专门设计BODY背景和边缘。而采用液态布局的网页中，又有很大一部分是采用两栏式结构。这里我要做的，是同时包括正文、左侧栏和右侧栏，始终撑满整个窗口，中栏的宽度会随浏览器窗口的大小而变化，当然了，在IE和Firefox里不能有差别。

这是我做的效果演示：http://www.ntrpg.org/yy/yy/demo/3c.htm

注意：在这个页面里，圆角方块的底部已经做成可以上下拖动的了，类似软件窗口的拖动效果，方便大家测试高度的自适应效果。

首先是HTML，建立三个容器，放在一个层里面，作为左、中、右三个竖栏：

<div id="main">

 <!-- 左侧栏 -->
 <div id="leftColumn"></div>

 <!-- 右侧栏 -->
 <div id="rightColumn"></div>

 <!-- 中间的正文 -->
 <div id="centerColumn"></div>

</div>

注意：中栏的DIV必须写在左右侧栏的“下面”，否则CSS就达不到效果：

#main{ 
 background:#464646; 
 width:100%; 
 margin:0px auto;       
 padding:0; 
 text-align:left;       
 float:left;

} 

#leftColumn{ 
 float:left; 
 width:200px;

}

#rightColumn{ 
 float:right; 
 width:200px; 

}

#centerColumn{ 
 width:auto; 
 margin:0px 200px 0px 200px; 

}

左右侧栏分别采用了左浮动和右浮动，限定宽度。中栏采用居中对齐的样式，只是不限定宽度，而且左右的margin设置为侧栏的宽度，而不是auto。

需要注意的是，为了让容器高度随着内容而增加，三栏外面的容器#main也必须设置为浮动，如果它的下面还有容器，也要设置为浮动，比如演示页面中的#foot，而#main上面的容器则不需要浮动，比如演示页面中的#head和#top。

但只是这样还不够，如果在容器里面加入内容，就会发现在该死的IE里出现了一些瑕疵，IE6和IE7一样，凭这一点就可以猜测是属于layout属性BUG，经过一些测试可以证实。所以解决办法是，给#centerColumn层加入某种能触发layout属性的样式，这里我采用的是IE的专有样式zoom：

#leftColumn{
 margin-left:0px;
}

#rightColumn{

 margin-right:0px;
}

#centerColumn{
 zoom:1;

}

以上代码应该放在一个IE专用的样式表里，这样既不会影响其他浏览器，也能通过W3C校验 :D

用微软的专有技术“条件注释”来实现：

<!--[if IE]>

<link href="css/forie.css" type="text/css" rel="stylesheet" />

<![endif]-->

注释内的代码只有符合条件判断的IE浏览器会解释。

接下来在三栏中都加入若干圆角方框，作为基本容器。我的圆角方框是这样的：

<div class="widgetBox"> 

 <div class="widgetTop">

  <div class="widgetLeftTop"></div><div class="widgetRightTop"></div>

 </div> 

 <div class="widgetCenter"> 
  <div class="widgetMain" >    
  </div> 
 </div> 

 <div class="widgetBottom">

  <div class="widgetLeftBottom"></div><div class="widgetRightBottom"></div>

 </div>

</div>

样式：

.widgetBox{
 margin:0px;
 padding:0px;

}
.widgetTop{
 background:url(../images/boxtbg.jpg) repeat-x;

 height:21px;
}
.widgetLeftTop{
 background:url(../images/boxlt.jpg) no-repeat;

 height:21px;width:16px;
 float:left;

}
.widgetRightTop{
 background:url(../images/boxrt.jpg) no-repeat;

 height:21px;width:16px;
 float:right;

}
.widgetBottom{
 background:url(../images/boxbbg.jpg) repeat-x;

 height:20px;
}

.widgetLeftBottom{
 background:url(../images/boxlb.jpg) no-repeat left;

 height:20px;width:16px;
 float:left;

}
.widgetRightBottom{
 background:url(../images/boxrb.jpg) no-repeat right;

 height:20px;width:16px;
 float:right;

}
.widgetCenter{
 background:#343434;
 margin:0 3px 0 3px;

}
.widgetMain{
 width:auto;
 margin:0 3px 0 3px;

 background:#fff;
 border-left:2px solid #CCCCCC;
 border-right:2px solid #CCCCCC;

 padding:8px;
}

为了适应各种大小，顶部边缘和底部边缘用了单独的圆角图片和横向重复的背景，而中间没有任何图片，用边框颜色和内外两个层之间的空隙颜色来做出边缘阴影的效果。

当页面里内容不足的时候，这些圆角方框都会显得不够长，可以在样式里加入最小高度来解决这个问题：

.widgetCenter{
 min-height:130px;
}

min-height属于CSS2标准，IE6并不支持，但可以利用IE6的一个最常见的overflow BUG：当容器内的东西大小超过容器时，按照W3C标准，超出的内容会“飘”出来显示在容器外面，而在IE6里容器会被撑大，所以只要直接在IE专用样式表里写.widgetCenter{height:130px;}就行了……然则，IE7修正了overflow BUG，而且支持min-height属性-_______-b…………所以，必须写成这样：

*html .widgetCenter{
 height:130px;
}

*html是某种只有IE6认识的东西……而IE7不认识……因此以上样式只对IE6及以下的浏览器生效……(随便说一下，也有一种只有IE7能识别的前缀：*+html )-_______-b

这样就做出了一个比较灵活的三栏布局，只改动少量代码和背景图片就可以适应不同的页面设计（我觉得，程序设计里注重的代码重用性，在网页中同样重要）。更详细的内容请自行查看演示页面的代码。