安科网

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

jkshangss

jkshangss

2012-04-21

关注 关注

HTML5的地理位置定位感觉是很cool的能力，我们公司原先的定位是在Android上完成的，现在我来尝试下使用HTML5的geolocation来做些事情看看。

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

HTML5的地理定位的采集方式：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位

老规矩，先简单的尝试下geolocationAPI应用

先HTML的代码，那是相当简单

  1. <body>  
  2.     <input type="button" value="get Geo" />  
  3. </body>  
javaScript的代码如下
  1. $(  
  2. function() {  
  3.     $(":button").click(  
  4.     function() {  
  5.         navigator.geolocation.getCurrentPosition(  
  6.         function(e) { //成功回调   
  7.             $.log(e.coords.accuracy); //准确度   
  8.             $.log(e.coords.latitude); //纬度   
  9.             $.log(e.coords.longitude); //经度   
  10.             $.log(e.coords.altitude); //海拔高度   
  11.             $.log(e.coords.altitudeAccuracy); //海拔高度的精确度   
  12.             $.log(e.coords.heading); //行进方向   
  13.             $.log(e.coords.speed); //地面的速度   
  14.             $.log(new Date(e.timestamp).toLocaleDateString());//采集日期   
  15.             $.log(new Date(e.timestamp).toLocaleTimeString());//采集时间   
  16.         },  
  17.         function(e) { //失败回调   
  18.             $.log(e.message); //错误信息   
  19.             $.log(e.code); //错误代码   
  20.         },  
  21.         {//可选参数 JSON格式   
  22.             "enableHighAcuracy": false, //是否启用高精确度模   
  23.             "timeout": 100, //在指定的时间内获取位置信息   
  24.             "maximumAge": 0//浏览器重新获取位置信息的时间间隔   
  25.         }  
  26.         );  
  27.     }  
  28.     );  
  29. }  
  30. );  
现在你点击按钮，就可以在控制台看到经纬度和采样日期时间了。

那获得了经纬度的值，必然首先要做的就是地图定位了，现在主流的地图服务我知道的有：baidu，google，和bing，下面我来测试我们得到的经纬度在这三个地图服务中取得的地图图像吧。

baidu和bing我都查了官方的sample，但是，但是，我要狠狠的批评google，我用chrome浏览器访问googleMapApi中的sample，竟然chrome告诉我“由于 google-developers.appspot.com 响应时间过长，导致“Google Chrome 浏览器”无法加载网页。该网站可能已崩溃，或者您的互联网连接出现了问题。”google，你看着办吧。

先看看我们的body

  1. <body>  
  2.     <div>  
  3.         <input type="button" value="get Geo" />  
  4.     </div>  
  5.     <div id="baiduMap" style="width: 300px; height: 300px; float: left;">  
  6.     </div>  
  7.     <div id="googleMap" style="width: 300px; height: 300px; float: left;">  
  8.     </div>  
  9.     <div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;">  
  10.     </div>  
  11. </body>  
然后引入三家的服务脚本
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  2.   
  3. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
  4.   
  5. <script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>  
以下是测试代码
  1. $.log = function(msg) {  
  2.     console.log(msg);  
  3. }  
  4.   
  5. $(  
  6. function() {  
  7.     $(":button").click(  
  8.     function() {  
  9.         navigator.geolocation.getCurrentPosition(  
  10.         function(e) { //成功回调   
  11.             $.log(e.coords.accuracy); //准确度   
  12.             $.log(e.coords.latitude); //纬度   
  13.             $.log(e.coords.longitude); //经度   
  14.             $.log(e.coords.altitude); //海拔高度   
  15.             $.log(e.coords.altitudeAccuracy); //海拔高度的精确度   
  16.             $.log(e.coords.heading); //行进方向   
  17.             $.log(e.coords.speed); //地面的速度   
  18.             $.log(new Date(e.timestamp).toLocaleDateString()); //采集日期   
  19.             $.log(new Date(e.timestamp).toLocaleTimeString()); //采集时间   
  20.             createBaiduMap(e.coords.longitude, e.coords.latitude);  
  21.             createBingMap(e.coords.longitude, e.coords.latitude);  
  22.             createGoogleMap(e.coords.longitude, e.coords.latitude);  
  23.         },  
  24.         function(e) { //失败回调   
  25.             $.log(e.message); //错误信息   
  26.             $.log(e.code); //错误代码   
  27.         },  
  28.         {//可选参数 JSON格式   
  29.             enableHighAcuracy: false, //是否启用高精确度模   
  30.             timeout: 100, //在指定的时间内获取位置信息   
  31.             maximumAge: 0//浏览器重新获取位置信息的时间间隔   
  32.         }  
  33.         );  
  34.     }  
  35.     );  
  36. }  
  37. );  
  38.   
  39.   
  40. function createBaiduMap(longitude, latitude) {  
  41.     var map = new BMap.Map("baiduMap");  
  42.     var point = new BMap.Point(longitude, latitude);  
  43.     map.centerAndZoom(point, 15);  
  44. }  
  45.   
  46. function createGoogleMap(longitude, latitude) {  
  47.     var map = new google.maps.Map(document.getElementById("googleMap"),  
  48.     {  
  49.         center: new google.maps.LatLng(latitude, longitude),  
  50.         zoom: 14,  
  51.         mapTypeId: google.maps.MapTypeId.ROADMAP,  
  52.         mapTypeControl: false,  
  53.         navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  
  54.     }  
  55.     );  
  56. }  
  57.   
  58. function createBingMap(longitude, latitude) {  
  59.     var map = new VEMap("bingMap");  
  60.     var LA = new VELatLong(latitude, longitude);  
  61.     map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);  
  62. }  

html5 font

jkshangss

jkshangss

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

一篇文章带你了解HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的

wusiye 2020-10-23

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn 2020-08-09

HTML 5 &lt;input&gt; 标签

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM

nercon 2020-08-01

HTML5的新语义和新结构元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，

swiftwwj 2020-07-21

HTML5中修改表单验证默认提示语句

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的

nercon 2020-07-16

indexedDB 数据库_html5中Web离线数据库的使用

在html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL数据库，它可以存储大量的数据。web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明

饮马天涯 2020-07-05

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole 2020-06-28

Html5—— &lt;input&gt; autocomplete 属性

autocomplete 属性是 HTML5 中的新属性。autocomplete 属性规定输入字段是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。即，当你输入过一次，提交后，下次再点击输入框时，会

gufudhn 2020-06-12

疯狂HTML5 CSS 3 JavaScript讲义 (李刚) 高清PDF扫描版 279M完整版下载

《疯狂html 5/css 3/javascript讲义》的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。该游戏综合运用了html 5的绘图支持、客户端存储等技术，具

csstpeixun 2020-06-11

Vue.Js（html5） + Java实现文件分片上传

代码从项目中剥离修改，未经测试，仅提供思路。let bufferLength = 1024 * 1024 * 5;需要注意的是，Blob.slice,文件块包含start指向的字节，而不包含end指向的字节，在使用时要注意Blob的边界。使用ByteBuf

huzijia 2020-06-09

[JavaScript] HTML5 播放hls流媒体视频流

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

WebVincent 2020-06-06

html5 video视频，本地环境好的，线上环境，不能播放

本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。

niehanmin 2020-06-03

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&

行吟阁 2020-05-30

HTML5中History.back()页面后退刷新页面

在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。　　返回了A1页面同时A1页面进行了刷新！

qsdnet我想学编程 2020-05-26

分享一些酷酷的特效，希望你也能够喜欢

id=ha200bcjbb畜牧资讯官方app页面模板。新闻资讯手机模板html下载。id=ha202bhcib简单的手机绑定银行卡页面，手机添加银行卡信息列页面模板 。id=ha2bh01a2jcss3 Animation属性制作夜晚的景色搭配悬浮发光圆点

gufudhn 2020-05-25

这些例子很炫，感兴趣的童鞋可以了解一下

id=kja1abajb黑色通用的网络品牌设计公司介绍html5单页模板，广告品牌设计公司网站单页模板。echarts中国地图城市区块选择代码点击》echarts中国地图城市区块选择代码html5基于echarts.js地图插件制作中国地图点击选择城市弹出

qsdnet我想学编程 2020-05-19

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据

suixinsuoyu 2020-05-15

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件允许网页获得来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。创建一个新的 EventSource 对象，然后规定发送更新的

HSdiana 2020-05-15

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。Inter

PioneerFan 2020-05-15

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。减少服务器负载 - 浏览器将只从服务器下载更新过或更改

GimmeS 2020-05-15
jkshangss

jkshangss

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号