猫灿先生博客,简约即美
« 上一篇: 下一篇: »

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

猫灿先生  |  2012 年 09 月 15 日  |  位置: » »

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

这篇日志发布于移动设备 纬度:1.305042 经度:103.773900

map info

日志信息 »

® 文章信息:本篇日志于 2012年09月15日 13:09 发表在分类 "Wordpress, 设计 Design"
™ 本文标签:, , ,
© 声明信息:本作品采用 license 协议进行许可,转载请注明来自"Bamboo Talk!"
喜欢本文,那就收藏到 :

“WordPress日志添加谷歌地图地理位置” 当前有12条评论 »

  1. 嗯哼! 很不错的技术贴

    • 一点想法,能帮到需要的人就好 :a:

  2. 这个功能不错~~~

    • O(∩_∩)O谢谢,移动设备发博客是趋势

  3. 不错,很好的功能

  4. 这个代码到底添加在哪里呢,为什么我添加在 single.php 里面总是出错呢,请教详细方法

    • 这个放在需要的地方即可,你贴一下error code看看是什么问题

      • 在天朝使用google map 真心伤不起啊 :i: ,本想使用ditu……google…..cn的,但是还是加载太慢,无奈求助百度地图,思前想后使用百度地图的 静态图API+URI API,自己参照接口说明自己修改了下代码,效果真心不错,大爱,虽然更爱google ……
        现在wordpress还不支持 geo_address :i:

        $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 “ 爪机发布于 纬度:$latitude 经度:$longitude “;
        }

        [img]http://ww1.sinaimg.cn/large/74824e81gw1eehtk2xfu8j20j30efgno.jpg[/img]

        • [img]http://ww4.sinaimg.cn/large/74824e81gw1eehtv2w2c4j20kf0b7q5p.jpg[/img]

          • 看来你的问题解决了,国内百度确实加载快,最近就连谷歌的jquery库都时而被屏蔽,这么好的服务ISP没有理由屏蔽

  5. 我想问一下PO主,这个地理位置信息,是wordpress的移动端自动添加的,抑或是PO文时手动添加的?我用了手头的一台touch和一台安卓手机做了测试,在网页端没有看到有那三个字段生成。

    • Hi,当你使用iOS或安卓的Wordpress客户端发表日志时,这个地理位置信息是自动生成的

发表您的评论




    添加表情    发布自定义图片
a b c d e f g h i j k l m n o p q r s t u v w x y z
(Ctrl+Enter快速提交) 如何设置头像?
0

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