文章关键字 ‘javascript’

用JavaScript为OpenLayers.Marker的加上单击显示详细信息的功能

2008年01月25日,星期五

 代码实现的效果为:

用于显示时,在地图上标记出对应的坐标,单击该标注时显示详细信息,再单击标注,隐藏详细信息,

/*
标记地区
参数 deleteEnable 是否允许删除
adminCode 行政区号,6位长
alarmLevel 图标级别

alarmMsg 消息
*/
function lzbmarkArea(deleteEnable, adminCode,alarmLevel,alarmMsg){
var isSelected=0;
var lonLatx=112;
var lonLaty=22.5;
var adminName=”";
if(!alarmMsg){alarmMsg=”"};
for(var i=0;i<=gdareainfo.length;i++){
if(gdareainfo[i]==adminCode){
lonLatx=gdareainfo[i-2];
lonLaty=gdareainfo[i-1]+0.5;
adminName=gdareainfo[i+1];
}
}
if(adminName==”") {
//alert(‘no info ‘);
return;
};

for(var j = markers.markers.length-1; j >=0 ; j–){
if(adminCode == markers.markers[j].adminCode)
{
markers.removeMarker(markers.markers[j]);
}
}
var size = new .Size(50,50);
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(getAlarmLevelImg(alarmLevel),
null,null,null);
// size, null, calculateOffset);
//var marker =new OpenLayers.Marker(map.getLonLatFromPixel(e.xy), icon);//显示到当前点中的坐标
var marker =new OpenLayers.Marker(new OpenLayers.LonLat(lonLatx, lonLaty), icon);//显示到县市的中心点
marker.adminCode=adminCode;
marker.adminName=adminName;
marker.showLabel=true;
marker.labelStr=”";
//显示文本标签信息。
marker.text = marker.adminName+”(“+marker.adminCode+”)”;
if(alarmMsg!=”")
{
marker.text= marker.text+” ” + alarmMsg;
}
//alert(marker.text);
if(marker.text != “”){
marker.icon.imageDiv.style.fontSize = “14px”;
marker.icon.imageDiv.style.color = “blue”;
//marker.icon.imageDiv.style.backgroundColor = “rgb(255, 255, 215)”;
marker.icon.imageDiv.style.whiteSpace = “nowrap”;
//marker.icon.imageDiv.style.width=”100%”;
//marker.icon.imageDiv.style.height=”30″;
var str = “”;
str+= “<img src=’”+marker.icon.url+”‘ alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘>”;
marker.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}
this.labelStr=marker.icon.imageDiv.innerHTML;
if (deleteEnable) {
marker.events.register(‘click’, marker, function(evt) {
markers.removeMarker(this);
OpenLayers.Event.stop(evt);
});
}else{
marker.events.register(‘click’, marker, function(evt) {
//alert(” 当前状态 “+this.showLabel);
//alert(this.icon.imageDiv.innerHTML);
if(this.showLabel){
var str = “”;
this.showLabel=false;
str+= “<table border=\”0\” bordercolor=\”#FF0000\”>”;
str+= “<tr><td bgcolor=\”rgb(255, 255, 215)\” style=\”white-space:nowrap\”>”;
str+= “<img src=’”+marker.icon.url
+”‘ ‘ height=20px width=20px alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘ ”
+” />”;
str+= this.text.replace(new RegExp(“\n”,”gm”),’<br/>’);
str+= “</td></tr>”;
str+= “</table>”;

this.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}else{
var str = “”;
str+= “<img src=’”+marker.icon.url
+”‘ height=20px width=20px ”
+”‘ alt=’”+marker.text+”‘”+”‘ title=’”+marker.text+”‘ ”
+” style=\”FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=0);WIDTH: 20px; POSITION: relative; HEIGHT: 20px\” /><br/>”;
//alert(‘不显示label’);
this.showLabel=true;
this.icon.imageDiv.innerHTML = str;//imageDivStr + str;
}
//alert(this.icon.imageDiv.innerHTML);
OpenLayers.Event.stop(evt);
});
}
markers.addMarker(marker);

}

function getAlarmLevelImg(level) {
var imgName = “”;
if (level == 1) {
imgName = “alarm_red.png”;
} else if (level == 2) {
imgName = “alarm_orange.png”;
} else if (level == 3) {
imgName = “alarm_yellow.png”;
} else if (level == 4) {
imgName = “alarm_blue.png”;
} else {
imgName = “alarm_other.png”;
}
return “/was/images/weather/” + imgName;
}

用于标注的的代码为:

if (deleteEnable) {
map.events.register(‘click’, map, function (e) {
//alert(map.getLonLatFromPixel(e.xy));
//document.getElementById(‘nodelist’).innerHTML = “正在载入… 请稍后…”;
var url =  map.layers[0].getFullRequestString(
{
REQUEST: “GetFeatureInfo”,
EXCEPTIONS: “application/vnd.ogc.se_xml”,
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: ‘text/xml’,
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
srs: ‘EPSG:4326′,
layers: ‘gdmap:Dguangdong_region’,
styles: ”,
WIDTH: map.size.w,
HEIGHT: map.size.h
},
gisctx+ “/wms”
);

var selectPoint = function(varresponse){
var rs=varresponse.responseText;
rs=rs.replace(“‘”,”");
// alert(rs);
if(rs.indexOf(“ADMINCODE = “)<1){// alert(“no info”);
return ;}
rs=rs.substr(rs.indexOf(“ADMINCODE = “)+12);
rs=rs.substr(0,6);
var adminCode=rs;
rs=varresponse.responseText;
rs=rs.substr(rs.indexOf(“ADMINNAME = “)+12);
rs=rs.substr(0,rs.indexOf(“\n”));
var adminName=rs;
var alarmLevel =”1″;
alarmLevel = document.getElementById(“alarmLevel”).value;

lzbmarkArea(deleteEnable, adminCode,alarmLevel);
}

OpenLayers.loadURL(url, ”, this, selectPoint, setHTML);
OpenLayers.Event.stop(e);

});

};

Tags: , ,

参考Google Syntax Highlighter for WordPress 定制纯Javascript实现的代码语法高亮

2007年11月28日,星期三

Google Syntax Highlighter for . 是代码加亮插件,但是该插件与文章的可视化编辑存在冲突,
参考 : http://www.ajaxgo.org/press/?p=6

并且在 pre标签内如果写 xml代码,在可视化编辑的情况下,就会被SyntaxHighlighter转出一堆转码字符,
而在源代码模式下,如果浏览器禁用了 ,则无法看到完整的xml内容.
加之我喜欢在代码里使用 [ code ] [ /code ] 这样用中括号的标记,
SyntaxHighlighter却只支持 pre标记,于是我根据这个插件,针对自己的博客做了改造.

实现简洁方便的语法高亮,既不影响后台对文章的编辑效果,也不影响文章在启用javascript和禁用 Javascript两种情况下的显示.

实现的思路如下.

在显示文章的页面里,
通过Javascript动态查找到 class为entry的div,这个就是显示文章内容的地方了,
然后操作innerHtml,将[ code ]与 [ /code ]之间的html内容进行解析替换,
自动识别代码类型然后将其转换为 pre 标记,再调用dp..HighlightAll(‘code’),进行代码高亮.

我的具体操作步骤如下:

1.下载 http://downloads.wordpress.org/plugin/google-syntax-highlighter.1.5.1.zip
(也可以直接下载 http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar,不过需要调整一下相关目录
上传到服务器之后保持google-syntax-highlighter目录即可.)
2.解压上传到 http:///618119.com/wp-content/plugins/
(后台管理中不要启用插件)
3.编写三个js文件,并上传到服务器.
highlighter.js  http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/highlighter.js
mySyntaxHighlighter.js http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/mySyntaxHighlighter.js
doSyntaxHighlighter.js http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/doSyntaxHighlighter.js

4.在wp-content/themes/default/single.php中加上

<script class=”javascript” src=”/wp-content/plugins/google-syntax-highlighter/Scripts/highlighter.js”></script>

这行加在 <?php get_footer(); ?> 的前面.

这样就实现了纯js的 语法高亮,且不对现有的可视化编辑造成影响,也支持用户在禁止了 Javascript的情况下正常浏览.
由于使用的动态增加css和js,因此对于禁止Javascript的情况下,浏览速度非常快,和没启用语法高亮一样.

我写的js代码大致有:

[code]

//如果存在code标记,则加载语法高亮的JavaScript
var codeTag="code";//code标记名
var highlighterUriPerfix="/wp-content/plugins/google-syntax-highlighter/";
var postElement=null;
//找到class 为 entry的对象进行处理
var tags=document.getElementsByTagName("div"); // class 为 entry
for(var i = 0; i < tags.length; i++)
if(tags[i].className.indexOf("entry") >=0)
postElement= tags[i];
if(postElement!=null && postElement.innerHTML.indexOf("["+codeTag+"]")>0){
document.write("<script class=\"javascript\" src=\""+highlighterUriPerfix+"Scripts/mySyntaxHighlighter.js\"><\/script>");
}

[/code]

不过代码中对html标记过滤掉处理还不够完善,,对代码的类型自动识别没怎么处理,但基本够用了.

Google Syntax Highlighter for WordPress 在: http://wordpress.org/extend/plugins/google-syntax-highlighter/
SyntaxHighlighter在 : http://code.google.com/p/syntaxhighlighter/

Tags: , ,

在 Spket IDE 1.6.4 中使用 Ext 2.0

2007年10月22日,星期一

Spket是个非常优秀的javascript开发工具,Ext则是非常优秀的javascript库。

IDE 1.6.4中使用Ext 2.0 .

1.下载:

http://www.spket.com/downloads/spket-1.6.4.1.jar

引用页 http://www.spket.com/download.html

http://extjs.com/deploy/ext-2.0-beta1.zip

引用页 http://extjs.com/download
2.运行 java -jar spket-1.6.4.1.jar进行安装

3.解压ext-1.1.1.zip

4.启动 Spket IDE,

5.new Project “testExt”, new File “test.js”

6.将ext-all.js 复制到D:\Documents and Settings\lizongbo\workspace\testExt

7.然后再在test.js里开头加上
/**
* @include “/testExt/-all.js”
*/
testExt为项目名字.

然后再在test.js里写代码就有ext的提示了.

输入Ext,然后按 Alt +/ ,就可以看到语法提示。

Tags: , , ,