使用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. python 3中 的subprocess

    commands好像python3.6被去除了,它现在被subprocess替代了 FUNCTIONS getoutput(cmd) Return output (stdout or stderr) ...

  2. jeesite模块解析，功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...

  3. Linux下命令别名配置

    在~/.bashrc文件中添加相关命令别名内容,可以降低风险操作 1. vim ~/.bashrc alias rm='rm -i' alias cp='cp -i' alias mv='mv -i' ...

  4. tornado 01 路由、输入与输出

    tornado 01 路由.输入与输出 一.安装tornado pyvip@Vip:~$ workon py3env #安装python3的虚拟环境 (py3env) pyvip@Vip:~$ pip ...

  5. luogu4931. 情侣？给我烧了！（加强版）（错位排列）

    题目链接 https://www.luogu.org/problemnew/show/P4931 题解 以下部分是我最开始的想法. 对于每一个 \(k\),满足恰好有 \(k\) 对情侣和睦的方案数为 ...

  6. Apache Shiro(六)-基于URL配置权限

    数据库 先准备数据库啦. DROP DATABASE IF EXISTS shiro; CREATE DATABASE shiro DEFAULT CHARACTER SET utf8; USE sh ...

  7. ssh无密码登录和scp无密码拷贝

    目的:在A主机上无密码登录B主机 方法: A主机生成密钥:ssh-keygen -t rsa 将密钥复制到B主机:cat ~/.ssh/id_rsa.pub | ssh root@B 'cat > ...

  8. 采用MQTT协议实现android消息推送（3）选ActiveMQ当服务端

    官网: http://activemq.apache.org/ 1.简介 强壮.快速.客户端支持多种语言的mqtt服务端软件. 2.特性 MQTT v3.1.AMQP v1.0.Stomp .Open ...

  9. css display flew 伸缩盒模型

    父级容器属 <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  10. CentOS6 克 隆

    原始机子关机 自己设置名字 保存地址 开机 配置hosts   后面的为你要设置的名字不配置可能xshell链接上不了网 更改名字: 配置网卡 删除物理地址 mac 和  uuid 删除网卡 重启