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

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

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

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

<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>內嵌Google地圖</title>
    <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js'></script>   
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
        body,input { font-size: 9pt; }
        html { height: 100% }  
        body { height: 100%; margin: 0px; padding: 0px }  
        #map_canvas { height: 100% }        
    </style>
    <script>
        $(function () {
            //定義經緯度位置: 以政大校園的八角亭為例
            var latlng = new google.maps.LatLng(24.985505, 121.57531);
            //設定地圖參數
            var mapOptions = {
                zoom: 16, //初始放大倍數
                center: latlng, //中心點所在位置
                mapTypeId: google.maps.MapTypeId.ROADMAP //正常2D道路模式
            };
            //在指定DOM元素中嵌入地圖
            var map = new google.maps.Map(
                document.getElementById("map_canvas"), mapOptions);
            //加入標示點(Marker)
            var marker = new google.maps.Marker({
                position: latlng, //經緯度
                title: "八角亭", //顯示文字
                map: map //指定要放置的地圖對象
            });
        });
    </script>
</head>
<body>
<div id="map_canvas" style="width:100%;height:100%"></div>
</body>
</html>

程式蛮简单的,主要修改自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

Leave a Reply