获取地理位置

<!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. Hihocoder 1329（splay）

    Problem 平衡树 Splay 题目大意 维护一个数列,支持三种操作. 操作1:添加一个数x. 操作2:询问不超过x的最大的数. 操作三:删除大小在区间[a,b]内的数. 解题分析 和上一题相比, ...

  2. java中static学习总结

    <<java编程思想>>: 1.static方法就是没有this的方法. 2.在static方法内部非静态方法. 3.在没有创建对象的前提下,可以通过类本身来调用static修 ...

  3. PHP小白学习日程之旅

    我是一名专升本的学生,在这里偶然接触了博客园,我觉得非常好,每天可以在这里看别人的分享与学习,还会在大学学习俩年,我只想专注的吧自己的技术提高,跟园子里的朋友们一起学习与分享加油!!!!!!!!!!! ...

  4. JVM内存分布和垃圾回收

    内存区域划分   程序计数器(Program counter Register) 描述  程序计数器(Program Counter Register)是一块较小的内存空间.它可以看作是当前线程执行的 ...

  5. Ubuntu 16.04错误：The update information is outdated this may be caused by network...的问题解决

    说明:这个问题没有最终的解决方案,只有不断的尝试. 错误: The update information is outdated this may be caused by network probl ...

  6. springMVC和ckeditor图片上传

    springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...

  7. LeetCode 125. Valid Palindorme (验证回文字符串)

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  8. intellij idea 写 Helloworld

    http://www.jetbrains.com/idea/webhelp/creating-and-running-your-first-java-application.html Creating ...

  9. YOCTO

    Yocto ,是一个开源社区它通过提供模版.工具和方法帮助开发者创建基于linux内核的定制系统,支持ARM, PPC, MIPS, x86 (32 & 64 bit)硬件体系架构.

  10. go语言笔记——调试还很弱，用gdb来做？可用panic和defer。格式化代码使用gofmt，貌似我的vim插件是自带

    3.3 调试器 应用程序的开发过程中调试是必不可少的一个环节,因此有一个好的调试器是非常重要的,可惜的是,Go 在这方面的发展还不是很完善.目前可用的调试器是 gdb,最新版均以内置在集成开发环境 L ...