或许你已经注意到了,本站的BlogRoll已经将google map集成近来了.这个东西主要是乱想今天向我提到这个问题的时候我决定做这样一个hacks的,或许你也会对此感兴趣,既然这样,我下面就将我的实现方式和需要的插件一起发布出来,这算不算无私的奉献呢?呵呵
如果你对原理不感兴趣,请直接跳到安装步骤
实现这个之前首先说说原理:googla map api中我们可以直接引用,并且可以通过控制里面的一些变量来实现我们需要的显示方式.至于地图上面的图标则可以直接在指定xml中读取.因此我们要实现的第一步就是通过编写插件将blogroll中的内容根据需要生成xml文件.下面是我的插件代码(后面将会给出下载地址)下面的代码我会一并给出解释:
- < ?php
- /*
- Plugin Name: cos-custom
- Plugin URI: http://www.storyday.com
- Description: use ajax to show comments
- Version: 1.0
- Author: jiangdong
- date:2007-04-20
- Author URI:http://www.storyday.com
- */
- function utf_substr($str,$len){
- return $str;
- for($i=0;$i<$len;$i++)
- {
- $i++;
- if($i< $len) {
- }
- }
- else {
- }
- }
- $new_str = $new_str."...";
- return $new_str;
- }
- }
- //下面是获取最新评论的函数,我的以前的ajax需要,google map是不需要的
- function cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '', $show_pass_post = false,$trim_num=20) {
- $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')";
- if(!$show_pass_post) { $request .= "AND post_password ='' "; }
- $request .= "AND comment_approved = '1' ORDER BY $tablecomments.comment_date DESC LIMIT $no_comments";
- $comments = $wpdb->get_results($request);
- $output = '';
- foreach ($comments as $comment) {
- $comment_excerpt = utf_substr($comment_content,$trim_num);
- $permalink = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
- $output .= $before . '<a href="' . $permalink . '" title="View the entire comment by ' . $comment_author . '">' . $comment_excerpt . '</a>' . $after;
- }
- $output = "< ?xml version='1.0' encoding='utf-8'?><ul class='latestcomments'>".$output."</ul>";
- echo $output;
- }
- }
- //show blogroll
- //这里就是关键的地方,通过查询数据库将当前的blogroll生成xml
- function cos_show_blogroll(){
- $sql = "SELECT * FROM ".$wpdb->links;
- $links = $wpdb->get_results($sql);
- echo "<markers>";
- foreach ($links as $link) {
- $lat = "";
- $lung = "";
- $lat = $link_sub[0];
- $lung = $link_sub[1];
- $link_description = "<a href=\"".$link->link_url."\" target=\"".$link->link_target."\"><b>".$link->link_name."</b></a>";
- if( $lat != "" ){
- echo " <div style=\"text-align:left\">";
- echo "]]></marker>\n";
- }
- }
- echo "</markers>";
- }
- }
- //show latest comments by index.php?action=storyday.showCommentsList
- function add_cos_cutom(){
- if( 'storyday.showCommentsList' == $_GET['action'] ){
- cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,30);
- }
- if( 'storyday.showBlogRoll' == $_GET['action'] ){
- cos_show_blogroll();
- }
- }
- }
- 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,这是防止和其它插件冲突,这有点类似<
上面的插件已经成功的完成了blogroll的xml输出.
下面我们开始创建页面,创建页面之前,首先要为此页面制作一个模板 links.php放置到你当前的模板文件根目录下.
- < ?php
- /*
- Template Name: Links
- */
- ?>
- < ?php get_header(); ?>
- <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAneVEiA6KoxcW0hNZTakAXhREHaY3_G2VV7PDyHHbfjJiiO4sfxSuNKmwaTqp1cAK1u2GI8JTf4WG4w"
- type="text/javascript"></script>
- <script type="text/javascript">
- //< ![CDATA[
- var map;//global vars
- function load() {
- if (GBrowserIsCompatible()) {
- map = new GMap2(document.getElementById("map"));
- map.setCenter(new GLatLng(38, 105), 4);
- //ADD CONTROL
- map.addControl(new GSmallMapControl());
- map.addControl(new GMapTypeControl());
- map.addControl(new GOverviewMapControl());
- map.setMapType(G_SATELLITE_MAP);
- var blogrollXml = "<?php echo get_settings('home'); ?>/index.php?action=storyday.showBlogRoll";
- GDownloadUrl(blogrollXml, function(data, responseCode) {
- var xml = GXml.parse(data);
- var markers = xml.documentElement.getElementsByTagName("marker");
- for (var i = 0; i < markers.length; i++) {
- //var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
- // parseFloat(markers[i].getAttribute("lng")));
- var curMarkerHtml = markers[i].firstChild.nodeValue;
- cosBlogRoll( map,parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")),curMarkerHtml,i);
- /*
- marker = new GMarker(point);
- GEvent.addListener(marker, "click", function() {
- marker.openInfoWindowHtml( html);
- });
- //marker = null;
- map.addOverlay(marker);*/
- }
- });
- }
- }
- function cosBlogRoll(map,lat,lng,html,order){
- var point = new GLatLng(lat,lng);
- map.addOverlay(createMarker(point, order,html));
- }
- // Creates a marker at the given point with the given number label
- function createMarker(point, number,html) {
- var marker = new GMarker(point);
- GEvent.addListener(marker, "click", function() {
- marker.openInfoWindowHtml(html);
- });
- return marker;
- }
- window.onload=load;
- //]]>
- </script>
- <div id="pagebg">
- <div id="map" style="width: 990px; height: 600px;border:1px solid #ccc;padding:4px;"></div>
- <div style="width:980;margin:10px 0 0 0;text-align:left;padding:4px;border:1px solid #ccc"><b>跳到:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(36, 150), 1); return false;">世界地图</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(36.94, 106.08), 4); return false;">中国地图</a> |
- 特区:
- <a href="#" onClick="map.setCenter(new GLatLng(21.23, 115.12), 7); return false;">香港</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(21.33, 115.07), 7); return false;">澳门</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(25.03, 121.30), 7); return false;">台湾</a> | <br />
- <b>西南区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(29.35, 106.33), 7); return false;">重庆市</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(30.40, 104.04), 7); return false;">四川</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(26.35, 106.42), 7); return false;">贵州</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(25.04, 102.42), 7); return false;">云南</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(29.39, 91.08), 7); return false;">西藏自治区</a> |
- <b>华中区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(34.46, 113.40), 7); return false;">河南</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(28.12, 112.59), 7); return false;">湖南</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(30.35, 114.17), 7); return false;">湖北</a> |
- <b>华北区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(39.55, 116.24), 9); return false;">北京市</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(39.02, 117.12), 7); return false;">天津市</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(38.02, 114.30), 7); return false;">河北</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(37.54, 112.33), 7); return false;">山西</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(40.48, 111.41), 7); return false;">内蒙古自治区</a> | <br />
- <b>东北区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(41.48, 123.25), 7); return false;">辽宁</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(43.54, 125.19), 7); return false;">吉林</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(45.44, 126.36), 7); return false;">黑龙江</a> |
- <b>华东区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(31.14, 121.29), 7); return false;">上海市</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(32.03, 118.46), 7); return false;">江苏</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(30.16, 120.10), 7); return false;">浙江</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(31.52, 117.17), 7); return false;">安徽</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(36.40, 117.00), 7); return false;">山东</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(26.05, 119.18), 7); return false;">福建</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(28.40, 115.55), 7); return false;">江西</a> |
- <b>华南区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(23.08, 113.14), 7); return false;">广东</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(22.48, 108.19), 7); return false;">广西</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(20.02, 110.20), 7); return false;">海南</a> |
- <b>西北区:</b>
- <a href="#" onClick="map.setCenter(new GLatLng(34.17, 108.57), 7); return false;">陕西</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(36.04, 103.51), 7); return false;">甘肃</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(36.38, 101.48), 7); return false;">青海</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(37.59, 106.11), 7); return false;">宁夏回族自治区</a> |
- <a href="#" onClick="map.setCenter(new GLatLng(43.45, 87.36), 7); return false;">新疆维吾尔自治区</a> | <br />
- </div>
- <div style="clear:both">
- <ul class="blogroll">< ?php get_links('-1', '<li>', ' ', ' ', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?></ul>
- </div>
- </div>
- < ?php get_footer(); ?>
注意,上面js代码中的key=ABQIAAAAneVEiA6KoxcW0hNZTakAXhREHaY3_G2VV7PDyHHbfjJiiO4sfxSuNKmwaTqp1cAK1u2GI8JTf4WG4w
这个key你需要自己去申请的,你可以去这里申请.
废话少说,下面说安装步骤:
- 首先下载这个文件cos_custom.zip放置到插件目录下,到后台激活该插件.
- 然后下载这个文件:links.zip,修改里面”key=ABQIAAAAneVEiA6KoxcW0″的部分,改成你自己在google的申请的api key,然后将其放置到你的当前模板文件夹下,如果该文件存在,重命名即可
- 创建一个页面link,创建的时候使用刚才上传的模板,如图
,在你的下拉菜单中选择”CosbetaLinks” - 然后在创建blogroll的时候,在高级的选择按照如图的要求添加好对方的经纬度即可
如果你在使用过程中有什么问题,欢迎留言,另外,兄弟们一定要劳动成果,转载请注明出处.
该日志未加标签
前9排已经被占据了 快抢好位置哦
这个博客地图确实不错 刚刚还看见一个chinabloggermap的网站呢
就是有人问我这个解决方案,所以去看了一下google map的api,然后弄了这样一个东西,现在感觉google真好玩
[quote]这个博客地图确实不错 刚刚还看见一个chinabloggermap的网站呢
[/quote]省份借用了这个网站的列表,只是名字而已,所以不算侵权,特此感谢,其它全部自己完成.js代码参考google api,wp wpplugin自己完成
[...] 有兴趣的同学赶快去下载吧! Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] 有兴趣的同学赶快去下载吧! Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] 生活点滴Enjoy Life - 将google map集成到你的blogroll中 如果你对原理不感兴趣,请直接跳到安装步骤 [...]
[...] 有兴趣的同学赶快去下载吧! [...]
[...] 有兴趣的同学赶快去下载吧! 喜欢本文吗?订阅 catch the digital flow,精彩文章一网打尽。 var tabPane1 = new WebFXTabPane( document.getElementById( “tab-pane-1″ ) ); [...]
Hello everybody, my name is Damion, and I’m glad to join your conmunity,
and wish to assit as far as possible.