使用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. ansible基本模块-server

    ansible   XXX   -m   service   -a  "name=XXX   state=started   enabled=yes"

  2. 获取一个表中的字段总数（mysql） Navicat如何导出Excel格式表结构 获取某个库中的一个表中的所有字段和数据类型

    如何获取一个表中的字段总数 1.function show columns from 表明: 结果 : 2.functiuon select count(*) from INFORMATION_SCH ...

  3. RPC 定义 和 原理

    一.RPC 1. RPC是什么 RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. ...

  4. Flask之flask-script 指定端口

    简介 Flask-Scropt插件为在Flask里编写额外的脚本提供了支持.这包括运行一个开发服务器,一个定制的Python命令行,用于执行初始化数据库.定时任务和其他属于web应用之外的命令行任务的 ...

  5. Wannafly挑战赛14 - E 并查集维护线性基区间

    给一个1-base数组{a},有N次操作,每次操作会使一个位置无效.一个区间的权值定义为这个区间里选出一些数的异或和的最大值.求在每次操作前,所有不包含无效位置的区间的权值的最大值. 线性基删除不知道 ...

  6. vbs SendKeys技术 vbs SendKeys

    简单说,这个命令就是模拟键盘操作,将一个或多个按键指令发送到指定Windows窗口来控制应用程序运行,其使用格式为:object.SendKeys string"object":表 ...

  7. 设置input placeholder的样式

    ::-webkit-input-placeholder {/*Chrome/Safari*/ font-family: 'Avenir', Helvetica, Arial, sans-serif; ...

  8. Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题

    [解决方法]: 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置. if (options.extract) { return ExtractTex ...

  9. vm中centos7磁盘扩容

      在VM虚拟平台管理客户端,将虚拟机关机后,将分配的磁盘大小30G扩至300G.如图.   调整完后,重新打开虚拟机,使用fdisk -l查看,可以看到我们刚刚扩容的空间已经可以看到,但没有分区,还 ...

  10. Docker的镜像迁移

    [root@localhost ~]# mkdir /opt/soft/ [root@localhost ~]# docker save c3987965c15d > /opt/soft/pos ...