笔记-网页内嵌Google地图与地理位置模拟

终于有机会开始玩HTML5中行动装置GPS整合应用。

我的第一步是希望能在网页整合Google地图,即便实际需求不一定需要显示 地图,但在开发测试阶段,要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道,因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的 地图吧!

Google地图Javascript API已经发展到了V3,整合应用起来相当方便省事,而官方的说明文件写得颇为详细(甚至有中文),要上手一点也不困难。以下便是我写的超简单的入门范例,试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点,经纬度数据在心跳表中唾手可得)


 


    內嵌Google地圖
       
    
    
    
    


 

程式蛮简单的,主要修改自Google 教学课程的范例,而该教学也已有详细的解释,此处不再赘述,结果如下:

解 决显示地图后,还有另一件要事--要能轻易模拟行动装置在不同地理位置检视网页的情境,总不能为了测个网页坐高铁搭飞机南北奔波吧?目前IE、 Chrome、Firefox浏览器都支援地理资讯功能,也有模拟地理位置资讯的方法(难易不同)。评估比较后,Firefox的Geolocator外挂可以设定储存多组地理位置,理应最方便好用,可惜我在新版Firefox中一直无法成功储存设定;退而求其次,Chrome的Manual Geolocation外挂也还算简便可用。如下图,安装后工具列会多了一个雷达范围圈图示,点下可开启Google Map介面指定要模拟的位置:

就酱,我成功地"飞到东京秋叶原"用Facebook打卡!

 

如此,就能模拟使用者在不同地理位置检视网页的结果了。

原文:http://blog.darkthread.net/post-2012-06-13-embed-google-map.aspx

你可能感兴趣的:(Div,/,Css,/,XML,/,HTML5,Google,/,Facebook,/,Pinterest,/,SNS)