笔记-网页内嵌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
笔记-网页内嵌Google地图与地理位置模拟相关推荐
- 网页内嵌百度地图位置定位
百度地图目前我用过的有2个版本,分别为1.1和2.0版本. 1.1版本不需要密匙也能运行,但是显示模糊且需要修改API 2.0版本显示效果好,但是需要申请密匙,为了效果我这里还是推荐2.0的版本. 百 ...
- php嵌入 播放mp4,nginx支持网页内嵌mp4视频播放
整了很久,mp4流媒体播放这方面资料很少,捣鼓了N天,刚申请开通CSDN博客,准备发表一下,共享给那些跟我一样苦逼找资料的兄弟们,TMD CSDN居然说"开通博客三天内不允许发表文章&quo ...
- IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题 参考文章: (1)IE内嵌google chrome frame解决浏览器兼容问题 (2)https://www.cnblogs.co ...
- 网页内嵌lodop控件，部分电脑一直提示未安装
网页内嵌lodop控件,部分电脑一直提示未安装 工作中遇到部分电脑的内嵌网页用不了lodop控件 lodop 提供了 C-Lodop 支持ppapi的打印方法. 工作中遇到部分电脑的内嵌网页用不了lo ...
- 网页内嵌B站视频，隐藏相关控件
网页内嵌 B 站视频主要是用 ifame , 其地址是: https://player.bilibili.com/player.html?cid=&aid=84267566&page= ...
- 网页歌单html制作,网页内嵌网易云插件全程（包括生成自己歌单的外链）
网页内嵌网易云插件全程(包括生成自己歌单的外链) 1.首先附图,网易云官网教程.(music.163.com) 2.实例操作, 首先第一步在网页版网易云,随便打开一个歌单,点击生成外链播放器. 3.你 ...
- iframe内嵌高德地图搜索
iframe内嵌高德地图搜索
- 点聚AIP电子签章在Chrome、Edge新内核、360系列、FireFox、IE、Opera等浏览器中实现网页内嵌效果案例（二）
B.函数功能请求:公司网站 http://zorrosoft.com/ 1) 显示关于对话框 请求:{"req":"AIP_AboutBox","ri ...
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
最新文章
- 背景图像位置css_CSS背景图像大小教程–如何对整页背景图像进行编码
- php tp5生成条形码,thinkphp5 + barcode 生成条形码
- BIT的浅谈，简单理解
- Yii2 的小贴士用法
- 从.Net到Java学习第四篇——spring boot+redis
- [C#.NET 拾遗补漏]12：死锁和活锁的发生及避免
- java里面什么时候环境变量_Java的环境变量什么时候需要设置?
- npy一维数组如何对给出的索引进行反选
- Xshell6突然连不上K8S所在的虚拟机
- 有哪些是你踏入社会才明白的道理？
- 复制一个空洞文件且忽略掉其空洞内容
- java新手怎么用if alse_关于java：为什么“F”+“alse”不是==“False”？
- 传奇服务器常见的网络攻击方式有哪些？-版本被攻击
- 人过三十，能不能成大事？看这10个细节足够，听话听音看人看小
- 中粮、益海品牌集中度提高，中小米企机会在高端细分市场
- EtherCAT原理概述
- c#网页设计 UI —登录注册界面
- 《数据库应用系统实践》------ 超市管理系统
- 终年32岁的传奇数学家，为何让硅谷领袖们集体落泪致敬？
- maven打包war包