设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分页面打印念头,郁闷着被笑话着被困扰着. 一个表格被分开打印到两张A4上,多难看啊.... 无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after 分别对应的 参数是: auto; always; left; right;…
笔记-网页内嵌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