地图、打车、外卖等各类手机APP。输入后会询问是否允许获取我们的位置。允许后，它会根据我们所在的位置推荐好东西。渐渐地，H5网页也开始获取用户位置。Geolocation是H5中新增的定位对象。常见的网页打开方式有两种：移动端和PC端。他们是如何定位的？IP定位：通过IP地址定位，由于没有硬件支持，服务器主要根据IP数据库判断位置，所以精度较差。GPS（全球定位系统）：采用GPS定位，定位时间长，耗电量大，但精度高。WIFI定位：wifi定位数据是通过计算三角距离得到的。三角测量是指多个当前wifi用户的已知距离。Wifi在室内也非常准确。手机地理定位：基于手机的地理定位数据由用户到某个基站的三角距离确定。此方法提供相当准确的定位结果。这种方法通常与基于WIFI的GPS定位结合使用。User-Defined：用户可以手动输入的地理位置。Geolocation方法geolocation对象在navigator对象中继承。它有两个获取用户位置的方法：getCurrentPosition()和watchPosition()，clearWatch取消watchPosition。getCurrentPosition:获取一次位置navigator.geolocation.getCurrentPosition(success=>{console.log(success.coords)//包含该位置的经纬度、速度、高度、经纬度精度、高度精度信息},fail=>{console.log(fail)//获取失败的原因},{//可以增加4个配置参数enableHighAccuracy:true,//高精度timeout:5000,//超时时间，单位msmaximumAge:24*60*60*1000,//位置缓存时间,单位ms})获取位置成功后返回的success.coords属性速度coords.accuracy-经纬度精度coords.altitudeAccuracy-高度精度coords.heading-方向，距离真北的弧度watchPosition:连续获取位置navigator.geolocation.watchPosition(success=>{console.log(success.coords)//包含用户的位置、速度、高度等信息},fail=>{console.log(fail)//定位失败原因},{enableHighAccuracy:true,//高精度timeout:60*1000,//timeout,inmsmaximumAge:24*60*60*1000,//位置缓存时间，单位msfrequency:1000,//获取频率})获取位置成功后返回的success.coords属性与上面的getCurrentPosition。两者唯一的区别是一个采集一次，一个采集多次，并且多了一个采集频率参数。clearWatch()：取消当前位置的获取，停止watchPosition方法。clearWatch类似于js中的clearInterval，clearInterval用于清除定时器。使用语法如下：varwPId=navigator.geolocation.watchPosition(success=>{console.log(success.coords)//包含用户的位置、速度、高度等信息},fail=>{console.log(fail)//定位失败原因},{enableHighAccuracy:true,//高精度timeout:60*1000,//超时，单位msmaximumAge:24*60*60*1000,//位置缓存时间，单位msfrequency:1000,//获取频率})navigator.geolocation.clearWatch(wPId)Geolocation应用会自动询问用户是否授权定位，因为这个功能可能会侵犯用户的隐私。除非用户同意，否则无法获取用户的位置。functiongetPosition(){if(navigator.geolocation){navigator.geolocation.getCurrentPosition(function(res){console.log("res",res)//位置信息},function(err){console.log("err",err)})}}getPosition()在电脑上，直接用浏览器打开文件，浏览器会立即弹出如下显示框：点击Disable后，调试器会打印出错误信息，错误信息是：{code:1message:"UserdeniedGeolocation"//用户拒绝地理位置}点击允许后，发现没有打印出位置信息。是什么原因？PC根据电脑的IP地址解析位置。此时直接打开文件没有域名和ip，所以无法获取位置。您必须将该文件放入服务中。如果不知道如何启动服务，可以下载nginx。下载安装成功后将文件放入html文件夹，启动nginx即可访问。启动本地服务，再次获取位置后，发现还是报错，无法返回位置。报错信息为：{code:1,message:"Onlysecureoriginsareallowed(see:https://goo.gl/Y0ZkNV)."//Onlyallowsecuresources}表示只能在https下使用域名！另外需要注意的是，chrome的google浏览器无法获取位置，IE浏览器可以获取。把上面的案例放到网上，只要用户点击同意获取位置，就没有问题！另外，我们经常会使用带位置的inputlocation，在地图上自动标记一个点，并将标记的点移动到更具体的位置，如图：一般我们需要绘制地图的时候，我们使用百度、高德、腾讯等第三方地图，注册一个账号，申请一个key即可使用。
