题目有点标题党,呵呵,别介意。
参考了Google,baidu还有街旁的GeoLocation代码
<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>test</title>
<style>
</style>
<script>
////大部分浏览器位置服务调用的Google的一个服务,这个服务不仅可以IP定位,还有很多的其他定位方式,总之很强大
function initLocation() {
// We are already defined. Hooray!
if (window.google && google.gears) {
return;
}
var factory = null;
// Firefox
if (typeof GearsFactory != 'undefined') {
factory = new GearsFactory();
} else {
// IE
try {
factory = new ActiveXObject('Gears.Factory');
// privateSetGlobalObject is only required and supported on IE Mobile on
// WinCE.
if (factory.getBuildInfo().indexOf('ie_mobile') != -1) {
factory.privateSetGlobalObject(this);
}
} catch (e) {
// Safari
if ((typeof navigator.mimeTypes != 'undefined') && navigator.mimeTypes["application/x-googlegears"]) {
factory = document.createElement("object");
factory.style.display = "none";
factory.width = 0;
factory.height = 0;
factory.type = "application/x-googlegears";
document.documentElement.appendChild(factory);
if(factory && (typeof factory.create == 'undefined')) {
// If NP_Initialize() returns an error, factory will still be created.
// We need to make sure this case doesn't cause Gears to appear to
// have been initialized.
factory = null;
}
}
}
}
// *Do not* define any objects if Gears is not installed. This mimics the
// behavior of Gears defining the objects in the future.
if (!factory) {
return;
}
// Now set up the objects, being careful not to overwrite anything.
//
// Note: In Internet Explorer for Windows Mobile, you can't add properties to
// the window object. However, global objects are automatically added as
// properties of the window object in all browsers.
if (!window.google) {
google = {};
}
if (!google.gears) {
google.gears = {factory: factory};
}
};
function getGeoLocation(okCallback,errorCallback){
initLocation();
try {
if(navigator.geolocation) {
geo = navigator.geolocation;
} else {
geo = google.gears.factory.create('beta.geolocation');
}
}catch(e){}
if (geo) {
//watch会触发多次,以便随时监控ip改变,iphone在开始会调用两次,屏幕旋转和解锁也会调用,汗。。。
//navigator.geolocation.watchPosition(successCallback, errorCallback, options);
geo.getCurrentPosition(okCallback , errorCallback);
} else {
alert("不好意思,你不让我定位!");
}
}
function okCallback(d){
alert('当前位置(纬度,经度): ' + d.latitude + ',' + d.longitude);
//iphone
if(d.coords)
alert('当前位置(纬度,经度): ' + d.coords.latitude + ',' + d.coords.longitude);
if(d.gearsAddress)
alert(d.gearsAddress.city);
};
function errorCallback(err){
alert(err.message);
};
</script>
</head>
<body>
咔咔咔咔咔
<input onclick="getGeoLocation(okCallback,errorCallback)" type="button" value="errr">
</body>
</html>
分享到:
相关推荐
获取当前网络的真实IP地址信息 详细接口请参考:http://ip-api.com/和http://ipinfo.io/
主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。
地理定位应用这是一个简单的 GeoLocation 应用程序,可以检索用户的位置并提供有关它的详细信息。 还可以搜索显示在地图上的网站的物理位置。 在搜索网站的位置后,用户可以将其位置与网站的位置进行比较。 每当用户...
在本文中给出了AeroRP协议详细的设计与评估过程, AeroRP是一个专为机载遥感应用程序设计的跨层路由协议。
前端向导-IP地址跟踪器欢迎! :waving_hand: 感谢您检查此前端编码挑战。 挑战使您可以提高现实工作流程中的技能。... 您无需添加任何卡的详细信息即可完成此过程,这是一个非常快速的过程。 这将为
用传单地图进行地理位置定位一个简单的应用程序,用于通过传单地图演示地理定位。有关更多详细信息截屏视频-https: 文章-http
语言:English 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。 它显示在Google Map上,并且可以找到有关IP地址的更多详细信息。
这个项目是我的一次面试任务的一部分要求如下使用浏览器 Geolocation API,查找当前用户位置并查询 google place API 以获取附近的餐馆列表。 设计要求清单包括: 带有交互式图钉的地图视图,悬停时会显示有关所选...
Salesforce DX项目:后续步骤 现在,您已经创建了Salesforce DX项目,下一步是什么? 以下是一些文档资源,可帮助您... 有关此文件的详细信息,请参见《 Salesforce DX开发人员指南》中的“ ” 。 阅读所有关于它的内容
12.3.6 添加Geolocation跟踪代码 267 12.3.7 添加Storage功能代码 267 12.3.8 添加离线事件处理程序 268 12.4 小结 268 第13章 HTML5未来展望 269 13.1 HTML5的浏览器支持情况 269 13.2 HTML未来的发展 269 ...
本书通过详细的代码示例举例说明了所讨论的技术。通过本书的学习,读者可以使用HTML5开发出炫目的多媒体应用和网站。 ● 使用canvas实现绘图、动画、特效和事件 ● 使用原生的<video>元素创建和观看视频 ●...
此IP地理位置搜索可帮助您快速找到您的IP地址的物理位置。 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。它显示在Google Map上,并且可以找到有关IP地址的更多详细信息。 支持语言:English
###如何使用: 在搜索框中输入位置 - 或 - 拖动地图在处理 Meetups 请求时观察屏幕上显示的标记单击列表视图中的事件或标记以查看事件详细信息###传奇: 你在这里做什么!? 今天的聚会正在进行中! 本周将...
你将通过详细的示例和代码,学会绘制图形、使用精灵、添加声音和验证数据以防作弊。我们最后会用这部分介绍的所有技术完成一个《旅游胜地》游戏,并将它连接到社交网络上。如果你会用HTML5、CSS3和JavaScript,那就...
目录 1、HTML5概述 2、HTML5支持情况 3、HTML5开发工具 4、HTML5特性介绍 5、WEB GL 6、HTML5与Silverlight4.0、Flash 7、HTML5未来发展趋势 8、八大浏览器Html5支持细节列表 9、参考书籍
内容有:创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用,Workers多线程处理,Geolocation地理位置等技术。CSS3部分主要介绍了CSS3概述,CSS选择器,文本、字体与颜色,背景和...
第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息;第10~13章分别讲解了socket通信框架jwebsocket、统计图制作插件rgraph、三维web开发技术webgl的详细使用方法,并辅之以丰富的案例。 《html 5开发...
第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息;第10~13章分别讲解了socket通信框架jwebsocket、统计图制作插件rgraph、三维web开发技术webgl的详细使用方法,并辅之以丰富的案例。 《html 5开发...
对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息;试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言、特定产品介绍等。下面我们将要...
查看更多详细信息。 var GPlaces = require ( 'react-native-gplaces' ) . default ; 用法 如果您想使用自定义查询,则此程序包支持它们。 要搜索查询,请,有关查询获取地点的信息请。 创建一个实例 您可以获取Go