终于有机会开始玩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
相关推荐
概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与数理统计-手写笔记-期末考试复习概率论与...
Python学习笔记--皮大庆,非常适合零基础入门。对应英文版本《How to think like a computer scientist》
HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源代码+截图)HotApp云笔记 - 精品开源demo-基于免费API(源...
2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我2004考研通信原理笔记--续大我
《新编地图学教程》学习笔记-第一章(最新).pdf《新编地图学教程》学习笔记-第一章(最新).pdf《新编地图学教程》学习笔记-第一章(最新).pdf《新编地图学教程》学习笔记-第一章(最新).pdf《新编地图学教程》学习笔记-...
嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序开发笔记-代码.zip嵌入式Liunx应用程序...
Java基础每日复习笔记-JavaSE高级阶段.2020-10-13-211312.edf
根据《Redis笔记-尚硅谷周阳V1.3》整理,脑图、思维导图xmind
信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.docx信息系统项目管理...
信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师考试必过笔记---第十章-项目时间进度管理.pdf信息系统项目管理师...
通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试复习通信电子电路(高频-模电PLUS)-手写笔记-期末考试...
统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于Python算法实现源码.zip 统计学习方法笔记-基于...
LaTex教程--latex排版学习笔记---入门提高.pdf
精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》笔记-1.pdf精华版《信息系统项目管理师教程》...
Java基础每日复习笔记-JavaSE基础阶段.edf
新版Android开发教程&笔记三--环境搭建与解析 新版Android开发教程&笔记四--Dalvik ADB 新版Android开发教程+笔记五--模拟器、应用1、2 新版Android开发教程+笔记六--应用3、4 布局 新版Android开发教程+笔记七--...
python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python scrapy 爬虫 python爬虫学习笔记-scrapy框架(1) python ...
摄影笔记-摄影笔记-摄影入门必备.pdf
zookeeper云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-...