猫灿先生博客,简约即美

20120927

2012 年 09 月 27 日 上午 2:53

20120927-032450.jpg

WordPress日志添加谷歌地图地理位置

2012 年 09 月 15 日 下午 1:09

WordPress在iOS和Android上都有网站管理应用,而且移动设备通过这个应用发布日志是可以记录发布的地理位置的。这就好像我们在发微博的时候可以签到,显示当前所在地点,其实这个功能也被Wordpress利用移动设备特点开发出来了。这篇日志就是探讨,使用移动设备发表的文章可以被网站识别,同时在谷歌地图上标记出所在地点,具体效果见日志最后一段。

当移动设备为日志标记上地理位置后,我们可以从网页版的撰写新文章页面看到“自定义栏目”增加了三项,分别是“geo_latitude”“geo_longitude”“geo_public”,其中前两个表示纬度和经度,需要我们用get_post_meta()函数提取出来,如果非空,将这两个参数传递到Google Map,实现位置显示。需要说明的是,Google Map已经支持iframe标签直接嵌入地图,不再像以前一样要申请key,然后写相当篇幅的javascript。最新版的Google Map API做了很多优化,这里我们关注的是如何向URL传递正确的参数,确保谷歌地图识别当前的地理位置,显示正确的图像。以上两个部分结合起来,就可以实现我们预期的效果,下面附有关code作为参考。

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
if ($latitude & $longitude) {
	echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;ll=$latitude,$longitude&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

由于Wordpress移动设备app使用还不是很大众,这个问题是以前的开发者没有想到的,在分析这个问题时用Google搜索了很多相关主题也没有找到类似解决办法。本文结合谷歌地图,就如何在Wordpress日志中添加地理位置信息提供了较完整的解决方案,而且方式简洁,避免了复杂的coding。移动设备是博客创作的得力助手,有好的idea可以及时记录,而不必打开电脑正式坐下来开始长篇大论,更加省时高效。以后用new ipad配合蓝牙键盘写作会更多,可以睡前写一点日记记录心情,便于更勤快地更新。另外还想提出一些建议供以后的开发者思考,现在获得了纬度经度信息,如何转化为具体的文字地址信息,更加个性化,贴近微博签到功能;如何在谷歌地图上添加位置锚点,标记出当前确切所在位置,和以前曾发过日志的位置。先想这些,以后如果能解决了再来探讨。

Update (30 Jan, 2013):
谷歌地图上添加位置锚点已经得到解决,方法就是将上面code里的”ll=”替换为”q=”,如果在经纬度数值后加一个括号说明文字(形式如”q=1.305079,103.773869(University Town)”),地图上将显示这个具体地址(University Town)。问题是,我们还不能从移动设备的Wordpress应用上获得这个具体地址,尽管这些地址可以从应用里看到。理论上这些地址字符串存储在“geo_address”里,但是和另外三个参数不同,这个只能通过手工添加,而不能从应用直接获得。但我们现在可以展示一下期望之中的效果图应该是这样:

如果今后Wordpress移动应用可以直接提供“geo_address”,那就可以实现了,上面的code也相应修改为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
	if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;q=$latitude,$longitude($address)&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

当前还是建议大家将上面code里的”($address)”去掉使用,待以后这一功能完备再加上。

Update (17 Apr, 2014):
回到国内后发现,上面加载地图的方法存在速度限制,而且受到Google被屏蔽的影响,有时不能正常访问,因此改用Static Maps API V2标准开发,请参考Google官方文档。在此相应的code应更新为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><img src='http://maps.googleapis.com/maps/api/staticmap?zoom=12&amp;size=600x160&amp;maptype=roadmap&amp;markers=color:green%7Clabel:%7C$latitude,$longitude&amp;sensor=false&amp;key=AIzaSyD2mcWFfx7P5fnQzdFoGZpHMVhMQ28gyhg' style='border:0;margin:0;width:100%;height:auto;' alt='map info' />";
}
?>

这样获得静态图形,确保了多浏览器的兼容性,加载速度也得到提升,国内网站亦可使用百度地图API,速度和效果也是不错的。

中国联通新加坡分公司官方网站

2012 年 09 月 08 日 下午 4:37

这个设计已经完成有一段时间了,也是挺巧的暑期接到这个工作,当时也不是太忙就决定试试看。这是我第一次承接商业性质的网站设计,基本都是我一个人完成的任务,后台就靠Wordpress了,主要是前端定制化,还有了解客户想要放什么内容。和一个联系人反复沟通需求,翻了不少内部资料了解各种业务流程,那边有什么建议再修改,用了一个星期做成了一个像样的测试版。还有版权问题,不能从网上随便找素材了,用的图片和文字资料都是内部的,培养了严谨的态度。其实技术上实现还好了,网站设计完成后最重要的还是内容,现在站上有一些我添加作为测试的文章,等以后上线了还要有专人维护。关于上线对他们好像是个较长的过程,预算、使用报告都要写出来给公司看,经费什么的要审批,何时启用依然未知。可以点击这里查看测试网站,另有内部使用的一个知识共享系统,暂不公开展示。

OK,就发个日志标记一下~这个任务对我的启示是,相对于技术,人的沟通更重要,更有价值含量,所以一个公司里职位越高,沟通的任务就会越大。不要局限,学会有效沟通,很能提升个人价值。

一篇思想汇报

2012 年 08 月 05 日 下午 9:56

一个很偶然的机会,我协助导师联系到新国大李光耀公共政治学院一个为南京市高级官员培训的项目,这算是新加坡为国内政府官员培训规格最正式的一个了。准备了大约一周时间,查阅和翻译了不少资料,PPT改了好几个版本,感觉还是很重视的。前天导师第一次正式授课我作为助教跟着去了,一路上我跟导师聊了一些中国官员的喜好,毕竟导师估计中国官员架子比较大,得讲得很有水平才能让他们有收获、服气,我说您不必担心这些,中国的公务员对教授还是很尊重的,您多讲一些新加坡他们没听过的案例,切实为他们执政提供解决策略,强调数据、图表这类实在的东西,听众自然会听得很佩服。事实上导师整场讲课都挺精彩,不仅案例讲得好,讨论引导也不错,而且第一次用普通话授课就如此流畅,我仅仅坐在后排提示了几个翻译。这一上午听得我也很佩服,深感自己要好好练练演讲能力。

课程开始前,我和导师与这批领导团聊天,南京成为这里所有人最亲切的话题,于是我也谈到我在南京大学完成了四年本科,带队的副市长和我握了握手。课间的时候我从后排起身准备给导师一些反馈,一个看起来还算年轻的先生过来和我握手,说也是南京大学校友,他九几年进南大读的本科,毕业后又留校继续读研,最近在攻读南大的博士,说着递给我一张名片,还要我在他的记录本上留个联系方式,很是友好客气,得知我是商学院毕业,还介绍一位团里的领导和我认识,一聊原来是商学院一位名师的弟弟。我和这位领导简单交谈了一会儿,从前看过了很多的官员,但这个人让我觉得没有当官的架子。我想也许这个人刚入仕途不久,不然谁会理一个坐在角落的助教呢,名片就这样收起来没有细看。

全文阅读 »

周日的安祥山游记

2012 年 07 月 17 日 下午 11:56

Google Reader里订阅的新加坡旅游局官方博客里最近发表了一篇关于安祥山的旅游介绍,里面的配图是很喜欢的风格,干净而多彩的街道,看上去就很清新。安祥山(Ann Siang Hill)就在牛车水地铁站附近,其实这里正是牛车水的一部分,以前还从没有来过,上周日就过去看了看,果然是闹市围绕的一片别具一格的宁静小镇。还是先分享维基百科关于这里的介绍,这里是19世纪大商人谢安祥买下的土地,于是这里因他而得名。关于这个词条暂时还没有中文的,先看看英文的。

Ann Siang Hill, located off South Bridge Road, was the site of the house and estate of Chia Ann Siang (谢安祥; 1832–1892), a wealthy Malacca-born Hokkien Chinese sawmiller… Most of the houses in Ann Siang Hill and along Ann Siang Road were built between 1903 and 1941. Ann Siang Road, which has elegantly restored shophouses today, was once the traditional home of clan associations and exclusive social clubs.

Via Wikipedia

全文阅读 »

新加坡乌敏岛一日游

2012 年 07 月 11 日 下午 11:34

经常看一些新加坡旅行介绍,了解到其实除了圣淘沙,这里还有不少别具风格的热带岛屿,乌敏岛(Pulau Ubin)就是其中之一。网上的推荐说这里以保持原始自然风貌而闻名,而且距离新加坡本岛很近,是都市人远离喧嚣享受宁静的地方,可以体验滨海风情和丛林探秘,的确很吸引人。于是约着南大的一伙同学安排在7月1日过去体验了一番,果然是不虚此行,一天玩下来虽然劳累却颇为尽兴。关于岛的介绍,还是来看一看维基百科的描述。

乌敏岛(Pulau Ubin)是位于新加坡岛。东北部外海里最大的海岛,面积约10.2平方千米。按新加坡政府的规划,岛上的大部分自然环境将维持原状。在“采花岗石场”、椰树及“橡胶园”、红树林、沼泽和“养虾场”,感受到浓厚的乡土气息。岛的东部海域有着许多螃蟹、海星、海马及珊瑚等海洋生物。

来自 维基百科

全文阅读 »

页数:7/17  «上一页 1 2 3 4 5 6 7 8 9 ... 15 16 17 下一页»
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!