获取地理位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    //兼容处理

    if (navigator.geolocation) {

        // successCallback 当获取用户位置成功的回调函数

        // errorCallback 当获取用户位置失败的回调函数

        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

    } else {

        console.log('sorry,你的浏览器不支持地理定位');

    }

    // 获取地理位置成功的回调函数

    function successCallback(position) {

        // 获取用户当前的经纬度

        // coords坐标

        // 纬度latitude

        var wd = position.coords.latitude;

        // 经度longitude

        var jd = position.coords.longitude;

        console.log("获取用户位置成功！");

        console.log(wd + '----------------' + jd);

    }

    // 获取地理位置失败的回调函数

    function errorCallback(error) {

        console.log(error);

        console.log('获取用户位置失败！')

    }

</script>

</body>

</html>

地理坐标抓取

http://api.map.baidu.com/lbsapi/getpoint/index.html

百度API展示

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

        #l-map{height:300px;width:100%;}

        #r-result{width:100%;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    <title>本地搜索的结果面板</title>

</head>

<body>

<div id="l-map"></div>

<div id="r-result"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

    var map = new BMap.Map("l-map");            // 创建Map实例

    map.centerAndZoom(new BMap.Point(116, 39.915), 16);

    var local = new BMap.LocalSearch(map, {

        renderOptions: {map: map, panel: "r-result"}

    });

    local.search("餐饮");

</script>

html5——地理位置的更多相关文章

  1. HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. 天气窗件展示 -一个HTML5 地理位置应用的例子

         定位及地理位置信息是LBS应用的核心,和定位功能有所不同的是地理位置信息更关注如何得到有意义的信息.(例如一条街道的地址)      从这边文章里你会学到HTML5地理位置信息的各种功能.它 ...

  3. [Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  4. HTML5 地理位置定位API（3）

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  5. HTML5 地理位置定位API（1）

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  6. 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用

    Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...

  7. 使用HTML5地理位置定位到城市的方法及注意事项

    介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...

  8. HTML5 地理位置定位API（5）

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  9. HTML5 地理位置定位API（2）

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  10. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

随机推荐

  1. [K/3Cloud]关于"选单"操作

    之前有些人对这块有些疑问,比如: 1.选单操作是否和下推基本一样,都是公用同一套单据转换规则,只不过下推是源单推目标单,选单是目标单去选择源单,最终操作结果一样? 2,我想实现选单的时候,选单列表先通 ...

  2. WEB开发----springboot的登录拦截机制

    如果是一个后台的管理项目的,有些东西是不能直接就可以访问的,必须要登录才可以进去,所以就需要进行登录拦截,只有登录过的用户才可以正常访问. 登录拦截是不会拦截jsp页面的方法,所以我们需要在Contr ...

  3. [51Nod1089] 最长回文子串 V2（Manacher算法）

    1089 最长回文子串 V2(Manacher算法) 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   回文串是指aba.abba.cccbccc.aaaa这种左右对称 ...

  4. [bzoj1574][Usaco2009 Jan]地震损坏Damage_dfs

    地震损坏Damage bzoj-1574 Usaco-2009 Jan 题目大意:题目链接. 注释:略. 想法: 显然对于每一个report点,和它直接相连的点都不可能到达1.我们将它打上标记. 然后 ...

  5. 在SpringMVC中，当Json序列化，反序列化失败的时候，会抛出HttpMessageNotReadableException异常, 当Bean validation失败的时候，会抛出MethodArgumentNotValidException异常，因此，只需要在ExceptionHandler类中添加处理对应异常的方法即可。

    在SpringMVC中,当Json序列化,反序列化失败的时候,会抛出HttpMessageNotReadableException异常, 当Bean validation失败的时候,会抛出Method ...

  6. SQLITE报错database is locked的解决办法

    用firedac连接SQLITE数据库,空间tdbedit绑定字段name,如下语句修改其值时报错. procedure TForm1.Button3Click(Sender: TObject);be ...

  7. Snail—UI学习之自己定义通知NSNotification

    背景是:一个界面跳转到第二个界面 然后 第一个界面发了一个通知  然后第二个界面收到这个通知后 把里面的数据取出来 在RootViewController.m中写入以下代码 #import " ...

  8. 类似于SVN的文档内容差异对比工具winmerge

    原文:http://www.jianshu.com/p/99282a4f3870 https://sourceforge.net/projects/winmerge/?source=typ_redir ...

  9. SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件

    SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...

  10. C++对象模型——&quot;无继承&quot;情况下的对象构造(第五章)

    5.1 "无继承"情况下的对象构造 考虑以下这个程序片段: 1 Point global; 2 3 Point foobar() 4 { 5 Point local; 6 Poin ...