将google map集成到你的blogroll中

时间：2007-05-02 20:40:22      类别：Web技术|WEB Tech, Wordpress      本文链接：生活点滴Enjoy Life

或许你已经注意到了,本站的BlogRoll已经将google map集成近来了.这个东西主要是乱想今天向我提到这个问题的时候我决定做这样一个hacks的,或许你也会对此感兴趣,既然这样,我下面就将我的实现方式和需要的插件一起发布出来,这算不算无私的奉献呢?呵呵

如果你对原理不感兴趣,请直接跳到安装步骤

实现这个之前首先说说原理:googla map api中我们可以直接引用,并且可以通过控制里面的一些变量来实现我们需要的显示方式.至于地图上面的图标则可以直接在指定xml中读取.因此我们要实现的第一步就是通过编写插件将blogroll中的内容根据需要生成xml文件.下面是我的插件代码(后面将会给出下载地址)下面的代码我会一并给出解释:

  1. < ?php
  2. /*
  3. Plugin Name: cos-custom
  4. Plugin URI: http://www.storyday.com
  5. Description: use ajax to show comments
  6. Version: 1.0
  7. Author: jiangdong
  8. date:2007-04-20
  9. Author URI:http://www.storyday.com
  10. */
  11. if( !function_exists("utf_substr")){
  12.         function utf_substr($str,$len){
  13.                 if( strlen( $str ) <= $len )
  14.                         return $str;
  15.                 for($i=0;$i<$len;$i++)
  16.                 {
  17.                         $temp_str=substr($str,0,1);
  18.                         if(ord($temp_str) > 127){
  19.                                 $i++;
  20.                         if($i< $len)    {
  21.                                 $new_str[]=substr($str,0,3);
  22.                                 $str=substr($str,3);
  23.                                 }
  24.                         }
  25.                 else {
  26.                         $new_str[]=substr($str,0,1);
  27.                         $str=substr($str,1);
  28.                         }
  29.                 }
  30.                
  31.                 $new_str = join($new_str);
  32.                 $new_str = $new_str."...";
  33.                 return $new_str;
  34.         }
  35. }
  36. //下面是获取最新评论的函数,我的以前的ajax需要,google map是不需要的
  37. if( !function_exists("cos_get_latest_comments")){
  38.         function cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '', $show_pass_post = false,$trim_num=20) {
  39.  
  40.         global $wpdb, $tablecomments, $tableposts;
  41.         $request = "SELECT ID, comment_ID, comment_content, comment_author FROM $tableposts, $tablecomments WHERE $tableposts.ID=$tablecomments.comment_post_ID AND (post_status = 'publish' OR post_status = 'static')";
  42.  
  43.         if(!$show_pass_post) { $request .= "AND post_password ='' "; }
  44.  
  45.     $request .= "AND comment_approved = '1' ORDER BY $tablecomments.comment_date DESC LIMIT $no_comments";
  46.     $comments = $wpdb->get_results($request);
  47.     $output = '';
  48.     foreach ($comments as $comment) {
  49.        $comment_author = stripslashes($comment->comment_author);
  50.        $comment_content = strip_tags($comment->comment_content);
  51.        $comment_content = stripslashes($comment_content);
  52.        $comment_excerpt = utf_substr($comment_content,$trim_num);
  53.        $permalink = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
  54.        $output .= $before . '<a href="' . $permalink . '" title="View the entire comment by ' . $comment_author . '">' . $comment_excerpt . '</a>' . $after;
  55.        }
  56.            $output = "< ?xml  version='1.0' encoding='utf-8'?><ul class='latestcomments'>".$output."</ul>";
  57.            header( 'Content-type: text/xml;charset=utf-8' );
  58.        echo $output;
  59.         }
  60. }
  61. //show blogroll
  62. //这里就是关键的地方,通过查询数据库将当前的blogroll生成xml
  63. if( !function_exists("cos_show_blogroll")){
  64.         function cos_show_blogroll(){
  65.                 global $wp_query, $wpdb;
  66.                 $sql = "SELECT * FROM ".$wpdb->links;
  67.                 $links =  $wpdb->get_results($sql);
  68.                 header("Content-Type: text/xml; charset=UTF-8");
  69.                 echo "<markers>";
  70.                 foreach ($links as $link) {
  71.                         $lat = "";
  72.                         $lung = "";
  73.                         $link_sub = explode("|",$link->link_notes);//get the latitude and longitude
  74.                         $lat = $link_sub[0];
  75.                         $lung = $link_sub[1];
  76.                         $link_description = "<a href=\"".$link->link_url."\" target=\"".$link->link_target."\"><b>".$link->link_name."</b></a>";
  77.                         if( $lat != "" ){
  78.                         echo  "\t<marker lat=\"".$lat."\" lng=\"".$lung."\">< ![CDATA[".$link_description;
  79.                         echo " <div style=\"text-align:left\">";
  80.                         echo "<b>&nbsp;URL: </b> ".$link->link_url."<br />";
  81.                         echo "<b>Desc: </b>".$link->link_description."<br />";
  82.                         echo "<b>Area: </b>".$link_sub[2]."<br />";
  83.                         echo "]]></marker>\n";
  84.                         }
  85.                 }
  86.  
  87.                 echo "</markers>";
  88.                 die();
  89.         }
  90. }
  91. //show latest comments by index.php?action=storyday.showCommentsList
  92. if( !function_exists("add_cos_cutom")){
  93.         function add_cos_cutom(){
  94.                 if(  'storyday.showCommentsList' == $_GET['action']   ){
  95.                         cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,30);
  96.                         die();
  97.                 }
  98.                 if(  'storyday.showBlogRoll' == $_GET['action']   ){
  99.                         cos_show_blogroll();
  100.                 }
  101.         }
  102. }
  103. add_action('init', 'add_cos_cutom');

add_action(’init’, ‘add_cos_cutom’); //这个是在所有的wp输出前开始执行,所以在这个触发器中,我执行完毕之后马上就把程序die掉,这样就可以只输出我需要的东西,如果你熟悉wp插件编写,再加上你有没有这样做个,或许这个实现方式对你会有帮助,我当时是在模板里面完成这个功能的,大家可以看我的这个文章基于ajax的comments终于完成 ,实现方式多么落后.
所以如果请求/index.php?action=storyday.showBlogRoll的时候就会输出blogroll的xml.(php中是这句’storyday.showBlogRoll’ == $_GET['action'] 来实现的),不要删除 storyday.showBlogRoll,这是防止和其它插件冲突,这有点类似< >里面的java package防止冲突的命名方式
上面的插件已经成功的完成了blogroll的xml输出.
下面我们开始创建页面,创建页面之前,首先要为此页面制作一个模板 links.php放置到你当前的模板文件根目录下.
  1. < ?php
  2. /*
  3. Template Name: Links
  4. */
  5. ?>
  6. < ?php get_header(); ?>
  7. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAneVEiA6KoxcW0hNZTakAXhREHaY3_G2VV7PDyHHbfjJiiO4sfxSuNKmwaTqp1cAK1u2GI8JTf4WG4w"
  8.       type="text/javascript"></script>
  9. <script type="text/javascript">
  10.     //< ![CDATA[
  11.         var map;//global vars
  12.  
  13.     function load() {
  14.       if (GBrowserIsCompatible()) {
  15.        map = new GMap2(document.getElementById("map"));
  16.         map.setCenter(new GLatLng(38, 105), 4);
  17.                 //ADD CONTROL
  18.                 map.addControl(new GSmallMapControl());
  19.                 map.addControl(new GMapTypeControl());
  20.                 map.addControl(new GOverviewMapControl());
  21.                 map.setMapType(G_SATELLITE_MAP);
  22.                 var blogrollXml = "<?php echo get_settings('home'); ?>/index.php?action=storyday.showBlogRoll";
  23.                 GDownloadUrl(blogrollXml, function(data, responseCode) {
  24.                   var xml = GXml.parse(data);
  25.                   var markers = xml.documentElement.getElementsByTagName("marker");
  26.                   for (var i = 0; i < markers.length; i++) {
  27.                         //var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
  28.                         //                                    parseFloat(markers[i].getAttribute("lng")));
  29.                         var curMarkerHtml = markers[i].firstChild.nodeValue;
  30.                         cosBlogRoll( map,parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")),curMarkerHtml,i);
  31.                         /*
  32.                         marker  = new GMarker(point);
  33.                         GEvent.addListener(marker, "click", function() {
  34.                                 marker.openInfoWindowHtml( html);
  35.                         });
  36.                         //marker = null;
  37.                        
  38.                                
  39.                         map.addOverlay(marker);*/
  40.                   }
  41.                 });
  42.       }
  43.     }
  44.         function cosBlogRoll(map,lat,lng,html,order){
  45.         var point = new GLatLng(lat,lng);
  46.         map.addOverlay(createMarker(point, order,html));
  47.  
  48.         }
  49.         // Creates a marker at the given point with the given number label
  50.         function createMarker(point, number,html) {
  51.           var marker = new GMarker(point);
  52.           GEvent.addListener(marker, "click", function() {
  53.                 marker.openInfoWindowHtml(html);
  54.           });
  55.           return marker;
  56.         }
  57.  
  58.     window.onload=load;
  59.     //]]>
  60.        
  61.     </script>   
  62. <div id="pagebg">
  63.  
  64.     <div id="map" style="width: 990px; height: 600px;border:1px solid #ccc;padding:4px;"></div>
  65.         <div style="width:980;margin:10px 0 0 0;text-align:left;padding:4px;border:1px solid #ccc"><b>跳到：</b>
  66.                     <a href="#" onClick="map.setCenter(new GLatLng(36, 150), 1); return false;">世界地图</a> |
  67.                         <a href="#" onClick="map.setCenter(new GLatLng(36.94, 106.08), 4); return false;">中国地图</a> |
  68.                         特区:
  69.                         <a href="#" onClick="map.setCenter(new GLatLng(21.23, 115.12), 7); return false;">香港</a> |
  70.                         <a href="#" onClick="map.setCenter(new GLatLng(21.33, 115.07), 7); return false;">澳门</a> |
  71.                         <a href="#" onClick="map.setCenter(new GLatLng(25.03, 121.30), 7); return false;">台湾</a> | <br />
  72.  
  73.                         <b>西南区:</b>
  74.                         <a href="#" onClick="map.setCenter(new GLatLng(29.35, 106.33), 7); return false;">重庆市</a> |
  75.                         <a href="#" onClick="map.setCenter(new GLatLng(30.40, 104.04), 7); return false;">四川</a> |
  76.                         <a href="#" onClick="map.setCenter(new GLatLng(26.35, 106.42), 7); return false;">贵州</a> |
  77.                         <a href="#" onClick="map.setCenter(new GLatLng(25.04, 102.42), 7); return false;">云南</a> |
  78.                         <a href="#" onClick="map.setCenter(new GLatLng(29.39, 91.08), 7); return false;">西藏自治区</a> |
  79.                         <b>华中区:</b>
  80.                         <a href="#" onClick="map.setCenter(new GLatLng(34.46, 113.40), 7); return false;">河南</a> |
  81.                         <a href="#" onClick="map.setCenter(new GLatLng(28.12, 112.59), 7); return false;">湖南</a> |
  82.                         <a href="#" onClick="map.setCenter(new GLatLng(30.35, 114.17), 7); return false;">湖北</a> |
  83.                         <b>华北区:</b>
  84.                         <a href="#" onClick="map.setCenter(new GLatLng(39.55, 116.24), 9); return false;">北京市</a> | 
  85.                         <a href="#" onClick="map.setCenter(new GLatLng(39.02, 117.12), 7); return false;">天津市</a> |
  86.                         <a href="#" onClick="map.setCenter(new GLatLng(38.02, 114.30), 7); return false;">河北</a> |
  87.                         <a href="#" onClick="map.setCenter(new GLatLng(37.54, 112.33), 7); return false;">山西</a> |
  88.                         <a href="#" onClick="map.setCenter(new GLatLng(40.48, 111.41), 7); return false;">内蒙古自治区</a> | <br />
  89.                         <b>东北区:</b>
  90.                         <a href="#" onClick="map.setCenter(new GLatLng(41.48, 123.25), 7); return false;">辽宁</a> |
  91.                         <a href="#" onClick="map.setCenter(new GLatLng(43.54, 125.19), 7); return false;">吉林</a> |
  92.                         <a href="#" onClick="map.setCenter(new GLatLng(45.44, 126.36), 7); return false;">黑龙江</a> |
  93.                         <b>华东区:</b>
  94.                         <a href="#" onClick="map.setCenter(new GLatLng(31.14, 121.29), 7); return false;">上海市</a> |
  95.                         <a href="#" onClick="map.setCenter(new GLatLng(32.03, 118.46), 7); return false;">江苏</a> |
  96.                         <a href="#" onClick="map.setCenter(new GLatLng(30.16, 120.10), 7); return false;">浙江</a> |
  97.                         <a href="#" onClick="map.setCenter(new GLatLng(31.52, 117.17), 7); return false;">安徽</a> |
  98.                         <a href="#" onClick="map.setCenter(new GLatLng(36.40, 117.00), 7); return false;">山东</a> |
  99.                         <a href="#" onClick="map.setCenter(new GLatLng(26.05, 119.18), 7); return false;">福建</a> |
  100.                         <a href="#" onClick="map.setCenter(new GLatLng(28.40, 115.55), 7); return false;">江西</a> |
  101.                         <b>华南区:</b>
  102.                         <a href="#" onClick="map.setCenter(new GLatLng(23.08, 113.14), 7); return false;">广东</a> |
  103.                         <a href="#" onClick="map.setCenter(new GLatLng(22.48, 108.19), 7); return false;">广西</a> |
  104.                         <a href="#" onClick="map.setCenter(new GLatLng(20.02, 110.20), 7); return false;">海南</a> |
  105.  
  106.                         <b>西北区:</b>
  107.                         <a href="#" onClick="map.setCenter(new GLatLng(34.17, 108.57), 7); return false;">陕西</a> |
  108.                         <a href="#" onClick="map.setCenter(new GLatLng(36.04, 103.51), 7); return false;">甘肃</a> |
  109.                         <a href="#" onClick="map.setCenter(new GLatLng(36.38, 101.48), 7); return false;">青海</a> |
  110.                         <a href="#" onClick="map.setCenter(new GLatLng(37.59, 106.11), 7); return false;">宁夏回族自治区</a> |
  111.                         <a href="#" onClick="map.setCenter(new GLatLng(43.45, 87.36), 7); return false;">新疆维吾尔自治区</a> | <br />
  112.  
  113.                 </div>
  114.         <div style="clear:both">
  115.                 <ul class="blogroll">< ?php get_links('-1', '<li>', '  ', ' ', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?></ul>
  116.         </div>
  117. </div>
  118.  
  119. < ?php get_footer(); ?>


注意,上面js代码中的key=ABQIAAAAneVEiA6KoxcW0hNZTakAXhREHaY3_G2VV7PDyHHbfjJiiO4sfxSuNKmwaTqp1cAK1u2GI8JTf4WG4w
这个key你需要自己去申请的,你可以去这里申请.
废话少说,下面说安装步骤:
  1. 首先下载这个文件cos_custom.zip放置到插件目录下,到后台激活该插件.
  2. 然后下载这个文件:links.zip,修改里面”key=ABQIAAAAneVEiA6KoxcW0″的部分,改成你自己在google的申请的api key,然后将其放置到你的当前模板文件夹下,如果该文件存在,重命名即可
  3. 创建一个页面link,创建的时候使用刚才上传的模板,如图googlemap.jpg,在你的下拉菜单中选择”CosbetaLinks”
  4. 然后在创建blogroll的时候,在高级的选择按照如图的要求添加好对方的经纬度即可blogroll.GIF

如果你在使用过程中有什么问题,欢迎留言,另外,兄弟们一定要劳动成果,转载请注明出处.

该日志未加标签
发表于 2007-05-02 20:40:22 目录：Web技术|WEB Tech, Wordpress [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 无相关日志
如果您喜欢本blog，欢迎你的feed订阅，谢谢你的支持
上一篇： « 也谈谈交换友情链接 下一篇： 我们在互联网上始终是弱者 »

前9排已经被占据了 快抢好位置哦

  • 转到第 页
(Required)
(Required, not published)
如果留言未显示请不要重复留言，我将为你恢复！


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.904s & 25