跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
2013-11-26 12:38
573 查看
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图
示例代码
代码示例包
点击下载
声明:本博客高度重视知识产权保护,发现本博客发布的信息包含有侵犯其著作权的链接内容时,请联系我,我将第一时间做相应处理,联系邮箱ffgign@qq.com。
作者:Mark Fan (小念头) 来源:http://cube.cnblogs.com
说明:未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有疑问,可以通过 ffgign@qq.com 联系作者,本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可
示例代码
<!DOCTYPE html> <html> <head> <title> PhoneGap Device Ready Example </title> <link href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/> <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/> <script src="content/js/jquery.js" type="text/javascript"> </script> <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript"> </script> <script src="content/js/cordova.js" type="text/javascript"> </script> <script src="content/scripts/xui-2.2.0.min.js"> </script> <script src="content/scripts/emile.js"> </script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); var watchID = null; function onDeviceReady() { var options = { frequency: 1333000 }; watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: true }); } function onSuccess(position) { var element = document.getElementById('geolocation'); var mapurlstr="<img style=\"margin:20px\" width=\"280\" height=\"140\" src=\"http://api.map.baidu.com/staticimage?center="+ position.coords.longitude+ ","+position.coords.latitude+"&width=300&height=200&zoom=11\" /> "; alert(mapurlstr); x$('#map').html('inner', mapurlstr); x$('#Latitude').html('inner', position.coords.latitude); x$('#Longitude').html('inner', position.coords.longitude); } function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } // 清除前述已经开始的监视 function clearWatch() { if (watchID != null) { navigator.geolocation.clearWatch(watchID); watchID = null; } } </script> <script> function initialise() { styleshow(); dom(); fx(); } //dom处理 function dom() { } function SubString(s){ var str; // 声明变量。 str = s.substr(1,236); // 截取取字符串。 return(str); // 返回字符串。 } //style 样式处理 function styleshow() { } //style 动画、形变、渐变 function fx() { } </script> </head> <body onload="initialise();"> <div id="map"> 地图显示区 </div> Longitude经度: <div id="Longitude"> 经度:显示区 </div> Latitude 纬度: <div id="Latitude"> 纬度显示区 </div> <button onclick="clearWatch();"> 清除地图坐标 </button> </body> </html>
代码示例包
点击下载
声明:本博客高度重视知识产权保护,发现本博客发布的信息包含有侵犯其著作权的链接内容时,请联系我,我将第一时间做相应处理,联系邮箱ffgign@qq.com。
作者:Mark Fan (小念头) 来源:http://cube.cnblogs.com
说明:未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有疑问,可以通过 ffgign@qq.com 联系作者,本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可
相关文章推荐
- 跨平台移动开发_PhoneGap API Camera 使用摄像头采集照片.
- 跨平台移动开发phonegap/cordova 3.3全系列教程-调用webservice/ajax
- 使用phonegap进行移动跨平台在Android平台开发所遇到的问题
- 使用LocationManager来获取移动设备所在的地理位置信息
- 跨平台移动开发_Android 平台使用 PhoneGap 方法
- 【LBS】移动互联网基于LBS地理位置应用开发必备
- 跨平台移动开发_PhoneGap 使用Accelerometer 加速器
- [置顶] Android移动开发-在Android项目里调用基于百度地图API实现定位
- iOS开发,定位当前所在地理位置偏移,坐标转换
- java调用百度地图api接口---转换非百度坐标和根据百度坐标转换地理位置
- cordova 移动跨平台开发(二) ---- 使用ionic界面开发
- 基于Axis2的webservice开发及跨平台跨语言调用
- 使用WCF进行跨平台开发之一(WCF的实现、控制台托管与.net平台的调用)
- 移动应用跨平台开发:《用PhoneGap来开发跨平台手机应用》
- 使用navigator.geolocation来获取用户的地理位置信息
- 微信公众号开发地理位置坐标的转换
- 基于微信地理位置的附近商家距离坐标数据查询方法
- ios开发之使用phonegap调用本地相机
- PhoneGap跨平台移动应用开发框架体验
- 使用PhoneGap开启移动开发之旅