整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Html5 Geolocation API 地理位置

当今的互联网时代,位置信息变得越来越重要,它能够帮助提供个性化的用户体验,例如根据用户的位置推荐附近的餐厅、商店或是导航服务。HTML5引入了Geolocation API,这使得获取用户的地理位置信息变得可能,同时也带来了隐私方面的考虑。本文将介绍Geolocation API的基本用法,并提供几个实际的例子。

Geolocation API 简介

Geolocation API允许网页获取用户的当前位置信息。这个API是基于用户的同意的,也就是说,用户必须授权网页才能获取位置信息。一旦授权,网页就可以访问用户的经纬度坐标。

这个API提供了几个关键的方法:

  • getCurrentPosition(): 获取当前的位置。
  • watchPosition(): 持续监控位置变化。
  • clearWatch(): 停止监控位置变化。

示例1:获取当前位置

下面是一个简单的例子,展示了如何使用getCurrentPosition()方法获取用户的当前位置信息。

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation API 示例</title>
</head>
<body>
    <button onclick="getLocation()">获取我的位置</button>
    <p id="location">位置信息将显示在这里</p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                document.getElementById('location').innerHTML = "抱歉,您的浏览器不支持地理定位。";
            }
        }

        function showPosition(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById('location').innerHTML = "纬度: " + latitude + 
            "<br>经度: " + longitude;
        }

        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    document.getElementById('location').innerHTML = "用户拒绝了地理定位请求。"
                    break;
                case error.POSITION_UNAVAILABLE:
                    document.getElementById('location').innerHTML = "位置信息不可用。"
                    break;
                case error.TIMEOUT:
                    document.getElementById('location').innerHTML = "请求用户地理位置超时。"
                    break;
                case error.UNKNOWN_ERROR:
                    document.getElementById('location').innerHTML = "发生未知错误。"
                    break;
            }
        }
    </script>
</body>
</html>

在上面的代码中,当用户点击按钮时,getLocation()函数会被调用。如果浏览器支持Geolocation API,它会尝试获取用户的当前位置。获取成功后,会调用showPosition()函数显示位置信息;如果出现错误,则会调用showError()函数显示错误信息。

示例2:监控位置变化

在一些应用场景中,我们可能需要实时监控用户位置的变化,例如在地图导航中。下面的例子展示了如何使用watchPosition()方法来实现这一功能。

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation API 示例</title>
</head>
<body>
    <button onclick="watchMyLocation()">监控我的位置</button>
    <button onclick="stopWatching()">停止监控</button>
    <p id="location">位置信息将显示在这里</p>

    <script>
        var watchID;

        function watchMyLocation() {
            if (navigator.geolocation) {
                watchID = navigator.geolocation.watchPosition(showPosition, showError);
            } else {
                document.getElementById('location').innerHTML = "抱歉,您的浏览器不支持地理定位。";
            }
        }

        function stopWatching() {
            if (watchID) {
                navigator.geolocation.clearWatch(watchID);
                watchID = null;
                document.getElementById('location').innerHTML = "位置监控已停止。";
            }
        }

        function showPosition(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById('location').innerHTML = "纬度: " + latitude + 
            "<br>经度: " + longitude;
        }

        function showError(error) {
            // 可以复用上一个示例中的showError函数
        }
    </script>
</body>
</html>

在这个例子中,用户可以通过点击按钮来开始或停止监控他们的位置。watchPosition()方法会返回一个ID,这个ID可以用来通过clearWatch()方法停止监控。

结论

Geolocation API为前端开发者提供了一种方便的方式来获取和监控用户的地理位置信息,从而可以构建更加智能和个性化的web应用。然而,使用这一功能时必须考虑到用户隐私的保护,确保在获取位置信息前得到用户的明确授权,并在应用中明确告知用户位置信息的使用目的和范围。

Geolocation(地理定位)

基本内容

目前定位技术

GPS - 美国的技术(经度和纬度),GPS卫星

专利费用,安全性

北斗定位 - 中国全自主

最初定位 - 军事化使用(惯性定位)

民用 - 增加卫星定位

物联网

车联网

基站定位

IP地址

HTML5中没有专属的定位技术

定位技术是由Goggle公司提供的(GoggleMap)

百度地图

百度地图的使用

地址 - http://developer.baidu.com/map/

注册百度开发者

如何创建应用

应用类型 - 服务器

启用服务 - 默认全部启用

请求校验方式 - IP白名单校验

IP白名单 - 0.0.0.0/0

得到应用的秘钥

百度地图

百度地图 - 类参考

百度地图 - Demo示例

使用百度地图的步骤

HTML页面

引入百度地图的JS文件

http://api.map.baidu.com/api?v=2.0&ak=您的密钥

定义容器元素 - 用于显示百度地图

<div></div>

JavaScript

创建百度地图的Map对象

new BMap.Map(容器的ID);

设置百度地图的中心和显示级别

centerAndZoom(center,zoom)

center - 设置地图的中心位置(String)

zoom - 设置地图的显示级别(3 - 19)

一节,我们介绍一下页面元素定位的八种方式和如何通过火狐和谷歌浏览器获取元素定位信息.

页面元素的定位方法

html页面是有一个个的标签组成的,我们定位元素其实就是定位这些标签。

首先来看一下有哪儿几种定位方式:

id

name

class name

tag name

link text

partial link text

xpath

css selector

一共八种定位方式,其实常用的定位方式也有:xpath、css selector,至少要熟练掌握一种......

第1种-ID定位

from selenium import webdriver
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_id("wd1").send_keys("python")

id定位

代码的意思就是定位id为:“wd1”的输入框并输入了“python”这个数据

<input id="wd1" class="search_ipt search_inp_border j_search_input tb_header_search_input" name="kw1" value="" autocomplete="off" size="42" tabindex="1" maxlength="100" x-webkit-grammar="builtin:search" x-webkit-speech="true" type="text">

第2种-name定位

from selenium import webdriver
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_name("kw1").send_keys("python")

我们通过观察这个<input>标签的属性,通过name也可以成功定位这个元素

第3种-class name定位

from selenium import webdriver
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_class_name("search_ipt.search_inp_border.j_search_input.tb_header_search_input").send_keys("python")

结果我们发现系统报错了,由于这个输入框的class中有四个class,

所以当我们同点来分割时,报错:Unable to locate element:;当我们用空格分割时,报错: Compound class names not permitted

而当我们用其中一个class时,比如:search_ipt

这时我们才可以成功的定位元素(一般不建议用这个class name来定位)

第4种-Tag name定位

from selenium import webdriver
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_tag_name("input").send_keys("python")

我们直接定位这个元素的标签名,可以成功定位,但是由于实际中tag name有很多相同的标签,可能会在运行时定位不准确,所以不建议使用这个

第5种-Link text定位

from selenium import webdriver 
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_link_text("地图").click()

然后我们通过链接的名字找到元素,并进行click()点击操作,进入到了地图页

第6种:Partial link text定位

  from selenium import webdriver
  driver =webdriver.Chrome()
  driver.get("https://tieba.baidu.com/")
  driver.find_element_by_partial_link_text("地").click()

同样的,我们通过链接的部分文字信息来定位到这个元素,依旧可以成功定位

第7种-Xpath定位

from selenium import webdriver
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_xpath(".//*[@id='wd1']").send_keys("python")

xpath定位

xpath是比较常用的定位,由于定位比较准确,一般是百发百中,但是缺点是绝对路径的xpath根据元素标签的相对位置来定位,如果页面的UI元素有所改动,结构路径变化的话,也会导致我们无法定位元素,不过这是针对我们用firepath自动获取时的定位,我们完全可以根据层级关系和元素属性自己来写xpath路径,这样的话,即使其他路径结构变化,对于xpath定位的准确度还有一定的保障

比如:

1.我们把xpath的父级路径添加上

//form/input[@id='wd1']

2.我们还可以对所查找元素标签里的属性进行组合

//form/input[@id='wd1' and @name='kw1']

3.我们对文本进行匹配

driver.find_element_by_xpath("//*[contains(text(),'网页')]").click()

可以看出xpath简直是神器啊,有没有,可以通过标签的各种属性来定位,等于说是包含了class name、name、id、link_text这些定位的方法。

第8种-CSS Selector定位

from selenium import webdriver
 
driver =webdriver.Chrome()
driver.get("https://tieba.baidu.com/")
driver.find_element_by_css_selector("#wd1").send_keys("python")

通过css selector 定位

其实这个css selector定位的强悍和xpath不相上下,也非常之强大,比如在css selector里:

我用class来定位:driver.find_element_by_css_selector(".search_ipt")

用id来定位:driver.find_element_by_css_selector("#wd1")

用标签名来定位(tag name):driver.find_element_by_css_selector("input")

用父子关系来定位:driver.find_element_by_css_selector("form>input")

用标签和属性来定位:driver.find_element_by_css_selector("input[id='wd1']")

以及综合上边的超级组合查询:driver.find_element_by_css_selector("form.clearfix>input[id='wd1']") #代表着class为clearfix的父级标签和自己id属性为wd1的input标签.

这些就是定位元素的方法,很常用也非常重要,值得收藏!