html 5获取GPS位置,Google地图显示

场景:

JQuery Mobile

代码片段:

	<script type="text/javascript">
$('#mylocation').live('pageshow', function () {
if (navigator.onLine) {
$("#mylocation_status").text('网络连接正常');
} else {
$("#mylocation_status").text('没有网络连接');
} if(navigator.geolocation) {
$("#mylocation_status").text('GPS定位中。。。'); navigator.geolocation.getCurrentPosition(function(position) {
$("#mylocation_status").text('GPS定位完成,' + position.coords.latitude + ',' + position.coords.longitude);
htmlString = "<img src='http://maps.googleapis.com/maps/api/staticmap?";
htmlString = htmlString + "center=" + position.coords.latitude + "," + position.coords.longitude + "&";
htmlString = htmlString + "zoom=15&size=290x360&maptype=roadmap&markers=color:red%7Clabel:S%7C" + position.coords.latitude + "," + position.coords.longitude + "&sensor=false'/>";
$("#map_canvas").html(htmlString);
});
}else {
$("#mylocation_status").text('GPS定位失败');
} });
</script>

参考:

Static Maps API V2 Developer Guide  静态图片API key要申请 https://developers.google.com/maps/documentation/staticmaps/#api_key
API说明 https://developers.google.com/maps/documentation/staticmaps/#api_key
测试: NY http://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600x300&key=API_console_key SH http://maps.googleapis.com/maps/api/staticmap?center=Shanghai+Hai,SH&zoom=13&size=600x300&key=AIzaSyBP24UOltpPGbNYDa-sS7YXKEvkxuPHfNs&sensor=false

Mobile Web 应用例子程序   :  Build an Exercise Tracking App: Persistence & Graphing

http://mobile.tutsplus.com/tutorials/phonegap/build-an-exercise-tracking-app-geolocation-tracking/

HTML5显示地图例子的更多相关文章

  1. 基于ECharts 的地图例子

      最近的一个项目要用到显示地图,本来用jq做了一个,但由于客户不满意(确实自己弄的样式效果都不是太理想),于是就上网搜了搜,最后决定基于百度的ECharts来弄地图 本来自己js基础不是很扎实,EC ...

  2. JavaWeb和WebGIS学习笔记(五)——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

  4. Swift - 使用MapKit显示地图,并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  5. 转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  6. openlayers一:显示地图与鼠标地理坐标

    openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...

  7. 百度地图api通过地址显示地图,白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  8. (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图

    (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图 http://www.cnblogs.com/macroxu-1982/archive/2011/09/13 ...

  9. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

随机推荐

  1. Redis 设计与实现读书笔记一 Redis List

    list结构体 adlist.h/list(源码位置) /* * 双端链表结构 */ typedef struct list { // 表头节点 listNode *head; // 表尾节点 lis ...

  2. Eclipse中设置JDK内存方式

    (1) 打开Eclipse,双击Serveers进入到servers编辑画面 (2) 点击 Open launch configuration 选项 (3) 选项中找到Arguments 的选项卡(t ...

  3. 有k个list列表, 各个list列表的元素是有序的,将这k个列表元素进行排序( 基于堆排序的K路归并排序)

    解题思路: 排序方法:多路归并排序 每次将n个list的头元素取出来,进行排序(堆排序),最小元素从堆中取出后,将其所在list的下一个元素 放入堆中,调整堆序列. 函数实现原型: void list ...

  4. sencha 环境配置

    sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...

  5. Win+R运行自定义程序应该这样玩

    互联网是一个“生态圈”,Windows有自己的生态学,有些看似高效的“奇技淫巧”实则只是搞笑. 我很以前十分崇拜善用佳软的站长,对事不对人,有些弊端,只是我们不知道,但并不代表就没有. 有些“恍然大悟 ...

  6. Linux1.0源代码编译过程

    根据源代码包中的readme文件及http://chfj007.blog.163.com/blog/static/173145044201191195856806/?suggestedreading& ...

  7. 布局转换:文档流->绝对定位

    布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...

  8. click 绑定(二)带参数的click 事件绑定

    注1:传参数给你的click 句柄 最简单的办法是传一个function包装的匿名函数: <button data-bind="click: function() { viewMode ...

  9. jquery轻松操作CSS样式

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  10. Python如何规定对方输入的数字必须是整数?

    可以使用字符串str的isdigit方法判断字符串是否是一个仅有数字组成,也就是整数.如果是整数退出while循环,否则继续请求输入. 1 2 3 4 5 6 while True:     x =  ...