使用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. jenkins安装maven工具

    下载maven工具,然后解压到/usr/local下面 然后在jenkins上面添加maven工具.指定他的设置配置文件(全局) 指定maven的目录位置 应用保存即可 !!! 虽然maven安装简单 ...

  2. nodejs npm包管理常用命令介绍

    1.输入 npm config ls -l 可以查看当前的设置 2.针对某一项设置,可以通过下面方式: npm config set 属性名 属性值 eg:npm config set prefix ...

  3. Codeforces - 915E 离散化区间覆盖

    我一直以来都错认为离散化就是换个映射,其实还需要在离散值两端加上相差为1的值才能真正离散 不然看一下test3就知道 不过这个离散姿势太暴力,以至于我1000ms时限跑出998ms(其实是太懒没有删重 ...

  4. 再谈java枚举 ENUM

    [From] http://www.cnblogs.com/rollenholt/archive/2012/11/27/2790402.html 没有枚举之前: 在没有枚举之前,我们想列举一些相关的常 ...

  5. 【记录】drozer与adb工具的安装与使用

    drozer:链接:https://pan.baidu.com/s/1o8QOIF4 密码:a7yv adb:链接:https://pan.baidu.com/s/1o865VSm 密码:zq9t d ...

  6. PHP foreach ($arr as &amp;$value)

    foreach ($arr as &$value) 看到一个有意思的东西: <?php $arr = ['1', '2', '3', '4']; foreach ($arr as &am ...

  7. 如何添加网页QQ在线组件

    免费开通QQ推广服务 复制代码到你想要展示的位置 粘贴,完成.

  8. linux运维基础之系统挂载与etc文件下介绍

    1) 目录结构说明: windows:磁盘----分区---格式化--系统 linux:磁盘--分区--生成一个文件(磁盘分区) linux 中一切皆文件 ll -h 显示人类能看懂的 mount - ...

  9. Permanent data region free space insufficient to allocate 64792 bytes of memory

    TT0802: Database permanent space exhaustedTT6220: Permanent data region free space insufficient to a ...

  10. MySql Unknown column 的解决方案

    解决方案: 有很多使用Mysql的用户可能都会遇到这个问题,明明表中这个列存在,为什么在查询的时候说找不到这个列名呢? 我遇到的原因就是列名前面含有空格:如下 create table student ...