获取地理位置

<!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. 【BZOJ4514】数字配对（费用流）

    题意: 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci× ...

  2. 使用java操作hbase（单节点）

    1.在运行java代码之前,一定要先启动Hbase,很重要!!    cd /home/cx/itcast/hbase-1.2.6/bin   ./start-hbase.sh 2.新建一个java项 ...

  3. dubbo 学习1

    1.高性能优秀的服务框架,应用可通过高性能的RPC实现服务的输出和输入功能,可以和spring框架无缝集成. 2.主要核心部件 a.remoting 网络通信框架 实现了sync-over-asnc ...

  4. 分享一个灰常好的 dapper 扩展插件: Rainbow

    dapper 是一个效率非常高的orm  框架 ,效率要远远大于 我们大微软的EF .    它只有一个类文件,非常之小.(在 EF 5.0 后 微软已经做了 改进) ps; 由于之前我也没测试过,只 ...

  5. 用信号量及其PV操作处理实际问题

    43.现有3个生产者P1.P2.P3,他们都要生产橘子汁,每个生产者都已分别购得两种不同的原料,待购齐第三种原料后就可配制成橘子汁装瓶出售.有一供应商能源源不断的供应糖.水.橘子精,但每次只拿出一种原 ...

  6. curl -O 下载文件

    curl -O 下载文件 学习了:http://blog.csdn.net/wulong710/article/details/53127606 curl -O http://a.b.c/a.tar ...

  7. 网络协议IPV6基础知识点集锦

    由于互联网的快速发展与普及,原有的IPV4地址已不能满足网络用户的需求,虽然NAT可以缓解IPV4地址的耗尽,但NAT破坏了网络环境的开放.透明以及端到端的特性,因此IPV6地址协议应运而生. IPV ...

  8. 21行python代码实现拼写检查器

    引入 大家在使用谷歌或者百度搜索时,输入搜索内容时,谷歌总是能提供很好的拼写检查,比方你输入 speling,谷歌会立即返回 spelling. 前几天,看到http://norvig.com/spe ...

  9. 如何修改ICO文件的尺寸

    使用Axialis IconWorkshop,该软件下载地址: http://www.xiazaiba.com/html/161.html 尺寸过大的ICO将无法作为应用程序的图标,如下图所示,这些素 ...

  10. MAC Wireshark抓包IOS

    网络抓包是个基础技能,对于网络协议的掌握有一定的要求.iOS上实现网络抓包可以用Charles(针对http和https),tcpdump(快速分析网络包),和Wireshare.之前写过一篇介绍tc ...