猫灿先生博客,简约即美
标签归类 » Google Map

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,速度和效果也是不错的。

Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!