使用Geolocation基于所在地理位置坐标调用百度地图API 效果图

示例代码

<!DOCTYPE html>

<html>

  <head>

    <title>

      PhoneGap Device Ready Example

    </title>

    <link

        href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"

        rel="stylesheet"

        type="text/css"/>

    <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/>

    <script src="content/js/jquery.js" type="text/javascript">

    </script>

    <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">

    </script>

    <script src="content/js/cordova.js" type="text/javascript">

    </script>

    <script src="content/scripts/xui-2.2.0.min.js">

    </script>

    <script src="content/scripts/emile.js">

    </script>

    <script type="text/javascript" charset="utf-8">

      document.addEventListener("deviceready", onDeviceReady, false);

      var watchID = null;

      function onDeviceReady() {

        var options = { frequency: 1333000 };

        watchID =  navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: true });

      }

      function onSuccess(position) {

        var element = document.getElementById('geolocation');

        var mapurlstr="<img style=\"margin:20px\" width=\"280\" height=\"140\" src=\"http://api.map.baidu.com/staticimage?center="+ position.coords.longitude+ ","+position.coords.latitude+"&width=300&height=200&zoom=11\" /> ";

        alert(mapurlstr);

        x$('#map').html('inner', mapurlstr);

        x$('#Latitude').html('inner', position.coords.latitude);

        x$('#Longitude').html('inner', position.coords.longitude);

      }

      function onError(error) {

        alert('code: '    + error.code    + '\n' +

        'message: ' + error.message + '\n');

      }

      // 清除前述已经开始的监视

      function clearWatch() {

        if (watchID != null) {

          navigator.geolocation.clearWatch(watchID);

          watchID = null;

        }

      }

    </script>

    <script>

      function initialise()

      {

        styleshow();

        dom();

        fx();

      }

      //dom处理

      function  dom()

      {

      }

      function SubString(s){

        var str;                // 声明变量。

        str = s.substr(1,236); // 截取取字符串。

        return(str);           // 返回字符串。

      }

      //style  样式处理

      function styleshow()

      {

      }

      //style 动画、形变、渐变

      function fx()

      {

      }

    </script>

  </head>

  <body onload="initialise();">

    <div id="map">

      地图显示区

    </div>

    Longitude经度:

    <div id="Longitude">

      经度:显示区

    </div>

    Latitude 纬度:

    <div id="Latitude">

      纬度显示区

    </div>

    <button onclick="clearWatch();">

      清除地图坐标

    </button>

  </body>

</html>

代码示例包

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头)    来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API的更多相关文章

  1. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  2. 【地图功能开发系列：二】根据地址名称通过百度地图API查询出坐标

    根据地址名称通过百度地图API查询出坐标 百度地图ApiUrl string url = "http://api.map.baidu.com/geocoder?address={0}& ...

  3. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  4. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  5. html5:地理信息 LBS基于地理的服务和百度地图API的使用

    地理位置请求 单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...

  6. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  7. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  8. Qt开发北斗定位系统融合百度地图API及Qt程序打包发布

    Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍 最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...

  9. 使用百度地图API进行Android地图应用开发（Eclipse）

    随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...

随机推荐

  1. COCO2018 目标检测

    刚浏览了一下coco数据集官网,认真看了一下18年的目标检测任务,简单记录一下. coco2018目标检测挑战赛只进行实例分割的评比,虽然仍然可以输出bbox,但是不可以提交到比赛的服务器,原因是官方 ...

  2. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

  3. Applese 的QQ群（二分+dfs）

    链接:https://ac.nowcoder.com/acm/contest/330/F 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言5242 ...

  4. POJ 2763 (LCA +RMQ+树状数组 || 树链部分) 查询两点距离+修改边权

    题意: 知道了一颗有  n 个节点的树和树上每条边的权值,对应两种操作: 0 x        输出 当前节点到 x节点的最短距离,并移动到 x 节点位置 1 x val   把第 x 条边的权值改为 ...

  5. HDU - 1300 简单DP

    题意:买珠子的方案有两种,要么单独买,价钱为该种类数量+10乘上相应价格,要么多个种类的数量相加再+10乘上相应最高贵的价格买 坑点:排序会WA,喵喵喵? 为什么连续取就是dp的可行方案?我猜的.. ...

  6. flume将数据发送到kafka、hdfs、hive、http、netcat等模式的使用总结

    1.source为http模式,sink为logger模式,将数据在控制台打印出来. conf配置文件如下: # Name the components on this agent a1.source ...

  7. U盘安装CentOS 7错误 /dev/root does not exist, could not

    问题: U盘安装CentOS 7,显示/dev/root does not exist, could not boot 解决方法: 1. 到windows里面查看U盘名称(例如 "Cento ...

  8. C++ 调用Python3

    作为一种胶水语言,Python 能够很容易地调用 C . C++ 等语言,也能够通过其他语言调用 Python 的模块. Python 提供了 C++ 库,使得开发者能很方便地从 C++ 程序中调用 ...

  9. libevent 同性恋 讲解

    https://aceld.gitbooks.io/libevent/content/25hong_fa_mo_5f0f_md.html github 这url 干活比较好 https://githu ...

  10. 处理定时事件（一）---模拟Redis实现（C++）

    https://blog.csdn.net/xiyoulinux_kangyijie/article/details/78278992