获取地理位置

<!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. spark之scala快速入门

    scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...

  2. spring boot jpa 事务管理

    spring boot 对jpa的支持极为方便,基本上不需要作太多配置,只需要加上注解就能支持事务: @Controller @Transactional(rollbackOn = Exception ...

  3. 终于又弄完一个DJANGO BY EXAMPLE的测试

    感觉学到了很多东东,都是以前开发不曾用到的. 知识的作用是到用时,知道到哪里去查相关的功能..:) 这个bookmarks就有很多功能点值得学习呢...

  4. YAML/Properties配置文件与Spring Boot（转）

    多年来,Java开发人员依赖于属性文件或xml文件来指定应用程序配置.在企业应用程序中,人们可以为每个环境(如开发,分段和生产)创建单独的文件,以定义相应环境的属性.但是,通过Spring引导,我们可 ...

  5. internalsviewer

    https://intview2.codeplex.com/ https://internalsviewer.codeplex.com/releases/view/21139

  6. UVa 10315 - Poker Hands

    题目:两个人手里各有五张牌,比較两牌型大小. 比較规则例如以下:(按优先级排序,优先级同样按以下内部规则比較) 1.straight-flush:同花顺,牌面连续,花色同样,按最大的值比較. 2.fo ...

  7. Java中的equals()和hashCode()

    概述 在我们使用类集框架(比方使用hashMap.hashSet)的时候,常常会涉及到重写equals()和hashCode()这两个方法. 这两个方法的联系是: 1. 假设两个对象不同,那么他们的h ...

  8. Android自己定义提示框

    在开发中,假设感觉系统自带的提示框不好看,开发人员能够自定义提示框的样式.主要是继承Dialog 程序文件夹结构 关键代码 package com.dzt.custom.dialog; import ...

  9. C#根据规则生成6位随机码

    #region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...

  10. Magento 模块开发之DispatchEvent

    在这一章节中.我们来了解 Magento 中的事件分发机制 Mage::dispatchEvent() 在创建自己的模块时, Event 事件的分发将会变成十分实用且有效 以个人的经验. 事件的分发使 ...