JavaScript获取地理位置

众所周知（雾），浏览器确定你的位置的方法有以下四种：

GPS
IP address
蜂窝电话
Wi-Fi
这里暂且不谈各种方式的优缺点，但很多小伙伴可能会疑惑:
这么多方式，浏览器到底该采取哪种方式来确定我的位置呢？
其实不必疑惑，浏览器会根据情况自行选择，通常顺序是：
蜂窝电话 -> Wi-Fi或GPS.
IP地址在城市中会更加精确
虽然没有了解这些的必要，但多知道一点总没坏处。
OK,话不多说，我们切入正题。
——————————分割线————————————————
我们先建立一个基本的html页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Where am I?</title><script src="./myLoc.js"></script>
</head>
<body><div id="location"><!--注意，id为"location"-->Your location will go here.</div>
</body>
</html>

接下来创建一个myLoc.js文件，存放我们的js代码

首先是一个getMyLocation函数

function getMyLocation() {  if (navigator.geolocation) {//检测浏览器是否支持地理定位APInavigator.geolocation.getCurrentPosition(displayLocation, displayError);//navigator.geolocation属性是一个对象，其中包含整个地理定位API，这个API支持的主要方法是getCurrentPosition//getCurrentPosition的工作是获取浏览器位置，有三个参数，其中两个是可选的//参数：successHandler, errorHandler, options//successHandler是一个函数，如果浏览器能成功确定位置就会调用这个函数（必选）//errorHandler，字面意思，如果浏览器无法确定位置就会调用这个函数（可选）//options，允许定制地理定位方法} else {alert("Oops, no geolocation support.");}
}window.onload = getMyLocation;

这函数的主要内容都在注释中，建议先把注释看完再接着往下食用~

我们接下来的工作，就是编写当浏览器成功获取位置之后所调用的函数：

function displayLocation(position) { /*当getCurrent成功调用displayLocation时，会向此函数传入一个position对象这个position对象包含有关浏览器位置的信息，包括一个有纬度和经度的coordinates对象*/ var latitude = position.coords.latitude; //得到纬度//coords是一个属性，其中包含对coordinates对象的一个引用var longitude = position.coords.longitude; //得到经度var div = document.getElementById("location");div.innerHTML = "You're at Latitude："+latitude+", Longtitude："+longitude;
}

这样子，不出意外的话打开浏览器显示的就会是当前所处的经纬度了。
还有一个需要注意的地方，Chrome浏览器获取地理位置是需要翻墙的；我最开始写完之后死活无法加载我的位置，盯着代码看了好久…

JavaScript获取地理位置相关推荐

微信获取地理位置转城市demo
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js ...
reactnative 获取定位_react native 获取地理位置的方法示例
react native 官网介绍了这个 api Geolocation 但是这个api只能返回经纬度所以要把经纬度通过逆地理位置转义 http://recode.ditu.aliyun.com ...
利用HTML5中Geolocation获取地理位置在Google Map上定位
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能. 1.获取当前地理位置调用方法 void getCurrentPosi ...
html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
微信公众号、地图定位、获取地理位置
本内容目标是在微信公众号中打开网页获取用户的定位信息. 1.腾讯地图定位没有将地图页面调出来,只是定位后返回json形式的地址 2.使用百度地图定位,调出地图界面,获取经纬度,alert地址 < ...
Java微信公众平台开发之获取地理位置
本部分需要用到微信的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系 ...
微信开发获取地理位置实例（java，非常详细，附工程源码）
在本篇博客之前,博主已经写了4篇关于微信相关文章,其中三篇是本文基础: 1.微信开发之入门教程,该文章详细讲解了企业号体验号免费申请与一些必要的配置,以及如何调用微信接口. 2.微信开发之通过代理调试 ...
微信获取地理位置名称_使用地理名称的目标地理位置
微信获取地理位置名称 Location-based applications are all the rage. What used to be prohibitively expensive GP ...
百度地图自动检索获取地理位置（经纬度）
百度地图自动检索获取地理位置,含有百度的自动检索和获取当前定位的功能! 我把这个功能单独写了一个界面,给分离了出来!假如项目中地址输入框有一些框架,这个要当心一些,定位会使索引位置发生错乱!注意改动 ...
微信上的网站用HTML5获取地理位置
今天折腾了一天,因为项目的需要,需要在微信网站上得到当前的地理位置.采用的是HTML5开发,但是实验了很多种方法,都不行.HTML5获取地理位置信息,是通过ip获取,ip的位置和你本人的位置差距还是很 ...

JavaScript获取地理位置

JavaScript获取地理位置相关推荐

最新文章

热门文章