You are here: Home / Blog / blog / 让Pjblog评论系统支持Google Map

让Pjblog评论系统支持Google Map

12月 9, 2006 by 花老鼠 · 8 Comments 

    自从 Weather For Google Earth 因为自动缓存遇到阻挠后干脆先放在了一边，死钻也解决不了问题，所以一直在看 Google Map 的 API文档。这东西客户端就是浏览器，而且估计现在没有那个电脑没安浏览器的了，所以说 Google Map 比 Google Earth 更容易被人使用，只是没那么绚罢了。
    回到主题，我就一直琢磨着让Pjblog可以通过UBB来标点或者可以显示一个线路图，显示一个从我家

到公司

的地图。那就需要从标点到地图的显示，一个完整的链。经过三天的努力终于初步完成了对点的标注和在日志中的显示。可以使用的标签以及属性为 [map=纬度,经度,级数,浮动对齐,高度,宽度]显示文本[/map] 。这里面要修改的文件还比较多。
    一、你要在 header.asp 文件中加入 API 的JS。

程序代码
<script src="http://maps.google.com/maps?file=api&v=2.67&key=" type="text/javascript"></script>


Key 需要你到 Google Map API注册一个。
    二、改动 common 文件夹里的文件 common.js，以下改动的文件都是在这个文件夹里面。添加对地图展开和关闭的代码

程序代码
var MapTemp=new Array()
function MapShow(strID,lat,lon,vZoom,Aling,width,height,html){
if (MapTemp[strID]==undefined) MapTemp[strID]=false; else MapTemp[strID]=!MapTemp[strID];
if(MapTemp[strID]){
            if ( document.all )    {
                 document.getElementById(strID).outerHTML = '<div id="'+strID+'" style="float:'+Aling+'"></div>'
            }
            else
            {
                 document.getElementById(strID).innerHTML = ''
                 document.getElementById(strID).style.width='';
                document.getElementById(strID).style.height='';
            }
        document.images[strID+"_img"].src="http://www.fineemb.com/images/google_earth_16.png"                    
        document.images[strID+"_img"].alt="打开地图"    
    }else{
        document.images[strID+"_img"].src="http://www.fineemb.com/images/google_earth_16_close.png"    
        document.images[strID+"_img"].alt="关闭地图"    
if (GBrowserIsCompatible()) {
document.getElementById(strID).style.width=width+"px";
document.getElementById(strID).style.height=height+"px";
var map = new GMap2(document.getElementById(strID));
map.addControl(new GSmallZoomControl());
map.setCenter(new GLatLng(lat,lon),vZoom);
map.setMapType(G_HYBRID_MAP);
var Html

    Html='<div id="zoom" class="userpass" style="font-size=14px;"> ↗ </div>';
    var ZoomOutControl=new K_HtmlControl(Html);
    map.addControl(ZoomOutControl,new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(5,5)));
    GEvent.addListener(ZoomOutControl,"click",function(){
      document.getElementById(strID).style.width="100%";
      document.getElementById(strID).style.height="450px";
    });
    Html='<div id="zoom" class="userpass" style="font-size=14px;"> ↙ </div>';
    var ZoomInControl=new K_HtmlControl(Html);
    map.addControl(ZoomInControl,new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(25,5)));
    GEvent.addListener(ZoomInControl,"click",function(){
      document.getElementById(strID).style.width=width+"px";
      document.getElementById(strID).style.height=height+"px";
    });

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var marker = new GMarker(new GLatLng(lat,lon), icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
})
}
document.getElementById(strID+"_href").blur()
}        
}
    function K_HtmlControl(html)
    {
        this.html=html;
    }
    K_HtmlControl.prototype=new GControl(true,false);

    K_HtmlControl.prototype.initialize=function(a)
    {
        this.Map=a;
        this.div=document.createElement("div");
        this.div.style.cursor="default";
        this.div.style.position="absolute";
        this.div.unselectable="on";
        this.div.onselectstart=function(){return false};
        this.div.style.fontSize="11px";
        this.div.style.fontFamily="Arial, sans serif";
        this.div.style.MozUserSelect="none"
        this.div.innerHTML=this.html;
        a.getContainer().appendChild(this.div);
        GEvent.bindDom(this.div,"click",this,this.onClick);
        return this.div;
    };
    K_HtmlControl.prototype.getDefaultPosition=function()
    {
        return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(140,2))
    };
    K_HtmlControl.prototype.onClick=function()
    {
        GEvent.trigger(this,"click");
    }


    三、在文件 ubbcode.asp 中添加对UBB标签转换显示的代码。

程序代码
          re.Pattern="\[map(=\d*|=\d*\.\d*|=-\d*|=-\d*\.\d*)(, \d*|, \d*\.\d*|, -\d*|, -\d*\.\d*)(,\d*|)(,left|,right|,center|,absmiddle|)(,\d*|)(,\d*|)\](.[^\[]*)\[\/map\]"
          Set strMatchs=re.Execute(strContent)
          dim mapID,boxLat,boxLon,boxAling,boxWidth,boxHeight,boxHtml,boxZoom
            For Each strMatch in strMatchs
                RAndomize
                  boxLat=strMatch.SubMatches(0)
                  boxLat=right(boxLat,(len(boxLat)-1))
                  boxLon=strMatch.SubMatches(1)
                  boxLon=right(boxLon,(len(boxLon)-2))
                  boxZoom=strMatch.SubMatches(2)
                  boxAling=strMatch.SubMatches(3)
                  if (len(boxZoom)=0) then
                    boxZoom="13"
                    else
                   boxZoom=right(boxZoom,(len(boxZoom)-1))
                  end if
                  if (len(boxAling)=0) then
                    boxAling="left"
                    else
                   boxAling=right(boxAling,(len(boxAling)-1))
                  end if
                  boxWidth=strMatch.SubMatches(4)
                  boxHeight=strMatch.SubMatches(5)
                  if (len(boxWidth)=0) then
                    boxWidth="128"
                    else
                   boxWidth=right(boxWidth,(len(boxWidth)-1))
                  end if
                  if (len(boxHeight)=0) then
                   boxHeight="128"
                   else
                  boxHeight=right(boxHeight,(len(boxHeight)-1))
                  end if
                  boxHtml=strMatch.SubMatches(6)
                mapID="map"&Int(100000 * Rnd)
                strContent= Replace(strContent,strMatch.Value,"<a id="""+mapID+"_href"" href=""javascript:MapShow('"+mapID+"','"+boxLat+"','"+boxLon+"',"+boxZoom+",'"+boxAling+"','"+boxWidth+"','"+boxHeight+"','"+boxHtml+"')""><img name="""+mapID+"_img"" src=""images/google_earth_16.png"" style=""margin:0px 3px -2px 0px"" border=""0"" alt=""显示地图""/><span id="""+mapID+"_text"">"+boxHtml+"</span></a><div id="""+mapID+""" style=""float:"+boxAling+"""></div>")
            Next


    四、我们要对UBB的配置文件 UBBconfig.asp 添加对地图标签的配置。在第14行的 ,html 后面加上 ong>,gmap 。这里加的位置就决定了UBB编辑器图标显示的位置。在61行下面加一个 Box 来显示用来标点的地图。
[codes=vb]response.write ("<div id=""UBBMapPanel"" class=""UBBSmiliesPanel""></div>")[/codes]
在下面的实例判断下加入一个地图的实例

程序代码
         Case "gmap"
               ToolsToCode=ToolsToCode&"<li><a id=""A_gmap"" href=""javascript:UBB_gmap();void(0)"" title=""插入地标"" class=""Toolsbutton""><img src=""images/google_earth_16.png"" border=""0"" alt=""插入地标"" /></a></li>"


    五、在插入UBB标签的页面加入添加 [map] 的支持。这个页面分 ubbcode_ie.asp 和 ubbcode_gecko.asp。在 ubbcode_ie.asp 里面加入如下代码

程序代码
function UBB_gmap(){
if (EditMethod=="normal"){
     var PText
     if (PText=window.prompt("请输入地图显示的文字，不能为空！\n使用标签：[map=lat,lon,zoom,align,width,height]text[/map]","请在此输入地标名")) {
  var mapPos=new getPos('A_gmap')
  smileyPanel=document.getElementById('UBBMapPanel')
  smileyPanel.style.width="300px"
  smileyPanel.style.height="300px"  
  smileyPanel.style.left=(mapPos.Left-300)+"px"
  smileyPanel.style.top=(mapPos.Top-300)+"px"
  smileyPanel.style.visibility ="visible"
    var map = new GMap2(document.getElementById("UBBMapPanel"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(36.94,106.08),4);    
    var OKControl=new K_HtmlControl('<div class="userpass"> 确定 </div>');
    map.addControl(OKControl,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(155,20)));
    GEvent.addListener(OKControl,"click",function(){
        CloseMapPanel()
        var center = map.getCenter();
        var zoom = map.getZoom();
        center = new String(center);
        center = center.substr(1,center.length-2);
        AddText("[map="+center+","+zoom+"]"+PText+"[/map]");        
    });
    var CloseControl=new K_HtmlControl('<div class="userpass"> 取消 </div>');
    map.addControl(CloseControl,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(115,20)));
    GEvent.addListener(CloseControl,"click",function(){
        CloseMapPanel()
    });
     }
}
if (EditMethod=="expert")
{
     AddText("[map][/map]")
}
   }[/codes]
在 ubbcode_gecko.asp 文件中加入如下代码
[codes=js:collapse]function UBB_gmap(){
if (EditMethod=="normal"){
     var PText
     if (PText=window.prompt("请输入地图显示的文字，不能为空！\n使用标签：[map=lat,lon,zoom,align,width,height]text[/map]","请在此输入地标名")) {
  var mapPos=new getPos('A_gmap')
  smileyPanel=document.getElementById('UBBMapPanel')
  smileyPanel.style.width="300px"
  smileyPanel.style.height="300px"  
  smileyPanel.style.left=(mapPos.Left-300)+"px"
  smileyPanel.style.top=(mapPos.Top-300)+"px"
  smileyPanel.style.visibility ="visible"
    var map = new GMap2(document.getElementById("UBBMapPanel"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(36.94,106.08),4);    
    var OKControl=new K_HtmlControl('<div class="userpass"> 确定 </div>');
    map.addControl(OKControl,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(155,20)));
    GEvent.addListener(OKControl,"click",function(){
        CloseMapPanel()
        var center = map.getCenter();
        var zoom = map.getZoom();
        center = new String(center);
        center = center.substr(1,center.length-2);
        AddText("[map="+center+","+zoom+"]"+PText+"[/map]");        
    });
    var CloseControl=new K_HtmlControl('<div class="userpass"> 取消 </div>');
    map.addControl(CloseControl,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(115,20)));
    GEvent.addListener(CloseControl,"click",function(){
        CloseMapPanel()
    });
     }
}
if (EditMethod=="expert")
{
     AddText("[map][/map]")
}
   }

function CloseMapPanel(){
  smileyPanel=document.getElementById('UBBMapPanel')
  smileyPanel.style.visibility ="hidden"
  document.body.removeEventListener("onclick",CloseMapPanel,true)
}


到这里就基本完成了。但你发现只有在后台的编辑和发布日志的时候有标点按钮，在评论里怎么没有呢。那就根据你的需要在其他用到UBB编辑器的地方配置了。

Filed under blog · Tagged with

About 花老鼠



Comments

8 Responses to “让Pjblog评论系统支持Google Map”
  1. 色福 说到：
    2009-02-18 @ 21:40

    发了个帖子，居然不见了。

    回复
  2. 色福 说到：
    2009-02-18 @ 21:39

    我也弄下，谢谢啦。。

    回复
  3. coolanus 说到：
    2007-04-10 @ 17:50

    想問一下版主，小弟要在自己的pjblog使用樓主提供的方式，
    但是在步驟五的地方找不到ubbcode_ie.asp和ubbcode_gecko.asp這兩個檔案，自己創造出來也沒有辦法讓[map]透過按鈕加入到內容裡，麻煩請版主幫忙找看看問題在哪，感謝

    回复
  4. simonwoo 说到：
    2007-03-20 @ 16:34

    让我来看看

    回复
  5. billy99 说到：
    2007-01-23 @ 11:57

    显示地图Test

    回复
  6. ANDI 说到：
    2007-01-13 @ 00:06

    显示地图广州

    回复
  7. 泡面 说到：
    2006-12-15 @ 11:23

    显示地图青岛

    青岛

    回复
  8. 一生泡面 说到：
    2006-12-15 @ 11:19

    显示地图青岛

    回复

你想说点啥？

告诉我你的想法
要想在你评论里出现一个头像，去这里搞一个