HTML5显示地图例子
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显示地图例子的更多相关文章
- 基于ECharts 的地图例子
最近的一个项目要用到显示地图,本来用jq做了一个,但由于客户不满意(确实自己弄的样式效果都不是太理想),于是就上网搜了搜,最后决定基于百度的ECharts来弄地图 本来自己js基础不是很扎实,EC ...
- JavaWeb和WebGIS学习笔记(五)——使用OpenLayers显示地图
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
- Swift - 使用MapKit显示地图,并在地图上做标记
通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...
- 转载-SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart
[原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...
- openlayers一:显示地图与鼠标地理坐标
openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...
- 百度地图api通过地址显示地图,白名单
百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...
- (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图
(android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图 http://www.cnblogs.com/macroxu-1982/archive/2011/09/13 ...
- android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图
1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...
随机推荐
- Redis 设计与实现读书笔记一 Redis List
list结构体 adlist.h/list(源码位置) /* * 双端链表结构 */ typedef struct list { // 表头节点 listNode *head; // 表尾节点 lis ...
- Eclipse中设置JDK内存方式
(1) 打开Eclipse,双击Serveers进入到servers编辑画面 (2) 点击 Open launch configuration 选项 (3) 选项中找到Arguments 的选项卡(t ...
- 有k个list列表, 各个list列表的元素是有序的,将这k个列表元素进行排序( 基于堆排序的K路归并排序)
解题思路: 排序方法:多路归并排序 每次将n个list的头元素取出来,进行排序(堆排序),最小元素从堆中取出后,将其所在list的下一个元素 放入堆中,调整堆序列. 函数实现原型: void list ...
- sencha 环境配置
sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...
- Win+R运行自定义程序应该这样玩
互联网是一个“生态圈”,Windows有自己的生态学,有些看似高效的“奇技淫巧”实则只是搞笑. 我很以前十分崇拜善用佳软的站长,对事不对人,有些弊端,只是我们不知道,但并不代表就没有. 有些“恍然大悟 ...
- Linux1.0源代码编译过程
根据源代码包中的readme文件及http://chfj007.blog.163.com/blog/static/173145044201191195856806/?suggestedreading& ...
- 布局转换:文档流->绝对定位
布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...
- click 绑定(二)带参数的click 事件绑定
注1:传参数给你的click 句柄 最简单的办法是传一个function包装的匿名函数: <button data-bind="click: function() { viewMode ...
- jquery轻松操作CSS样式
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- Python如何规定对方输入的数字必须是整数?
可以使用字符串str的isdigit方法判断字符串是否是一个仅有数字组成,也就是整数.如果是整数退出while循环,否则继续请求输入. 1 2 3 4 5 6 while True: x = ...