获取地理位置

<!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. [USACO06FEB]数字三角形

    题目描述 FJ and his cows enjoy playing a mental game. They write down the numbers from 1 to N (1 <= N ...

  2. CI session 类的用法

    最近使用codeingiter框架,发现默认的session 不是很好用,以下是用法总结:使用的是2.0.2的版本 1.扩展自带的session类:application/libraries/MY_s ...

  3. Android之设置拖拽监听

    以EditText为例: username.setOnDragListener(new OnDragListener() { @Overridepublic boolean onDrag(View v ...

  4. 十进制浮点数转换成IEEE754标准的32浮点数的二进制格式

    参考: http://jimmygod.blog.163.com/blog/static/43511339200792605627411/ http://blog.csdn.net/archersab ...

  5. Android MTP 文件浏览Demo

    本apk实现了MTP文件浏览的简单功能. 通过Demo apk能够浏览连接到当前设备上的MTP设备上的文件. Demo路径:http://download.csdn.net/detail/sailin ...

  6. MYSQL利用Navicat对含有Bold字段表进行导入导出

    MYSQL中含有Blob字段是一件挺麻烦的事情,导出导入不方便.我介绍我是怎么做的. 1.在MYSQL的my.ini最后中加入一行配置max_allowed_packet = 100M,重新启动MYS ...

  7. 进销存管理系统， 刚学C++

    各位大神们.有什么补充的能够评论一下吗? #include<iostream> #include<string> using namespace std; int G=0;// ...

  8. 从基于 SQL 的 CURD 操作转移到基于语义 Web 的 CURD 操作

    中文名称 CURD 含义 数据库技术中的缩写词 操作对象 一般的项目开发的各种参数 作用 用于处理数据的基本原子操作     它代表创建(Create).更新(Update).读取(Retrieve) ...

  9. 在word中doc与docx的区别是什么（整理）

    在word中doc与docx的区别是什么(整理) docx 是Office2007使用的,是用新的基于XML的压缩文件格式取代了其目前专有的默认文件格式,在传统的文件名扩展名后面添加了字母x(即.do ...

  10. CJOJ1857 -PG图

    Description 背景 LDN不知道为什么特别喜欢PG,也许是某种原因吧…… 有一天,他发明了一个游戏“PG图”. 问题描述 给定一个有向图,每条边都有一个权值. 每次你可以选择一个节点u和一个 ...