<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>H5地理位置Demo</title>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript" src="convertor.js"></script>
</head>
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
<script type="text/javascript">
if (window.navigator.geolocation) {
var options = {
enableHighAccuracy: true,
};
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
} else {
alert("浏览器不支持html5来获取地理位置信息");
}

function handleSuccess(position){
// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 调用百度地图api显示
var map = new BMap.Map("map");
var ggPoint = new BMap.Point(lng, lat);
// 将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(ggPoint, 2, function(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
}

function handleError(error){

}
</script>
</html>

//////////////////////////////////convertor.js/////////////////////////////////////////////////////////

(function() { // 闭包
function load_script(xyUrl, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
// 借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function() {
if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if (head && script.parentNode) {
head.removeChild(script);
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore(script, head.firstChild);
}
function translate(point, type, callback) {
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
+ "&to=4&x=" + point.lng + "&y=" + point.lat
+ "&callback=BMap.Convertor." + callbackName;
// 动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult) {
delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
}

window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();

JS实时定位的更多相关文章

  1. webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

    (写在前面,谈谈物联网展会)上次深圳会展中心举行物联网展会,到了展会一看,80%以上的物联网应用都是在搞RFID,室内定位,我一度怀疑物联网落地方案的方向局限性与市场导向,后来多方面了解才明白,展会上 ...

  2. webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

    序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...

  3. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  4. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  5. 极客DIY：廉价电视棒玩转GNSS-SDR，实现GPS实时定位

    0×00 前言 GNSS是Global Navigation Satellite System的缩写.中文称作:全球卫星导航系统.全球导航卫星系统. GNSS泛指所有的卫星导航系统,包括全球的.区域的 ...

  6. 上帝之眼APP——实时定位监控、即时通讯

    项目地址 https://github.com/guoyaohua/GodsEYE 开发环境 Android studio 2.3.1 极光推送IM SDK 百度鹰眼SDK 背景介绍 定位监控系统,不 ...

  7. vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

    vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-el ...

  8. ADF控件ID变化引发JS无法定位控件的解决方法

    原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...

  9. easyui时间控件用js实时获取选定的时间的取法

    easyui时间控件用js实时获取选定的时间的取法var   datetime=$("#id").datetimebox("getValue");不能用 $(& ...

随机推荐

  1. What makes an excellent front-end developer?(for my English speech)

    What makes an excellent front-end developer? Let me please start this talking by saying that what is ...

  2. inverse理解

    首先术语inverse 被翻译为反转的意思.inverse 制定了关联关系中的方向. 当set的inverse属性默认情况下,hibernate会按照持久化对象的属性变化来同步更新数据库. 得到两条s ...

  3. UIGrid/UITable 性能优化

    性能优化 排行榜,邮件,关卡等数据列表项,一般在玩家打开面板时,都会重新刷新一次数据,那是否有必要每次都生成列表项呢? 假如每次列表的内容有变动就Instance 新的Gameobject,这是没有必 ...

  4. Flex数据绑定陷阱（一）

    Flex数据绑定陷阱:常见的误用和错误 当构建Flex或者Adobe AIR程序时,将一个对象的值自动的传递给另一个对象这种处理是数据绑定最常 用并最有用的特征之一. 尽管如此,同时数据绑定会减缓程序 ...

  5. 创建简单的机器人模型smartcar

    前面我们使用的是已有的机器人模型进行仿真,这一节我们将建立一个简单的智能车机器人 smartcar,为后面建立复杂机器人打下基础. 一.创建硬件描述包. cd ~/catkin_ws/srcroscr ...

  6. 使用Proguard做Java代码混淆

    下载Proguard, 我下的是最新的Proguad5.2 在windows下运行bin/proguardgui.bat, 可以看见图形界面, 载入配置, 然后process. 配置文件例子 -inj ...

  7. Java集合系列：-----------05LinkedList的底层实现

    前面,我们已经学习了ArrayList,并了解了fail-fast机制.这一章我们接着学习List的实现类--LinkedList.和学习ArrayList一样,接下来呢,我们先对LinkedList ...

  8. office2016各个版本 以及 解决visio搜索任何都提示无匹配项问题

    http://tieba.baidu.com/p/4089747196 版本:Office 2016 Visio 专业版 32位版文件名:SW_DVD5_Visio_Pro_2016_W32_ChnS ...

  9. tcpip的可靠性

             

  10. perl 下使用非root用户安装模块

    perl下安装模块可以使用cpan命令,但是通常我们不具有root用户权限,所以只能以sudo方式安装模块. 例如需要安装Net::SCP::Expect模块, 执行cpan Net::SCP::Ex ...