<!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. Virtual Box常用指令

    以下操作需在命令行里将当前路径设为 Virtual Box安装目录 1. 调整磁盘大小(只能调整动态分配的.vdi格式文件) VBoxManage modifyhd "xxx.vdi&quo ...

  2. Bubble Sort [ASM-MIPS]

    # Program: Bubble sort # Language: MIPS Assembly (32-bit) # Arguments: 5 unordered numbers stored in ...

  3. java的构造方法

    当一个类a继承一个类b,类b继承类c,类c继承类d时, 先执行d的构造,然后c.b:当该执行a的构造时,如果有成员变量,就先执行成员变量,最后构造 子类继承父类,子类重写父类的某个方法,当父类构造时, ...

  4. 这段时间对c#和java的感受

    这段时间对c#和java的感受 虽然很多书上说语法相似,但实际这是一个接近于门外汉的看法 真正的不同是 c#对更贴近系统API,      而java倡导跨平台 因而c#语法关键字更多,更细, 而ja ...

  5. nginx 入门

    1.nginx 如何处理一个请求 IP,域名的处理 server { listen  80  default_server;     //添加 default_server就是一个默认的server ...

  6. Java面向对象编程之异常处理机制

    一:Java的异常处理机制的优点: 1:把各种不同情况的异常情况分类,使用JAVA类来表示异常情况,这种类被称为异常类.把各种异常情况表示成异常类,可以充分的发挥类的可扩展性和可重用性. 2:异常流程 ...

  7. [No000044]你是否还傻到把最好的留在最后？

    想写这篇文章很久了. 因为一直觉得我们人有一个毛病,总是喜欢将最好的东西留到最后才享用,或者等最后再给别人. 但人们往往忽略了至关重要的一点,就是这个最好有一个保质期.可以说人能拥有的快乐触发点.有机 ...

  8. NOIP提高组2010 关押罪犯

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...

  9. cocos 锚点、包围盒

    cocos中,setPosition就是设置一个sprite的锚点在父级元素的坐标 默认锚点是sprite矩形的中点 可以用getBoundingBox返回一个sprite所占矩形范围.范围用Rect ...

  10. 叫板OpenStack:用Docker实现私有云

    看到各大厂商的云主机,会不会觉得高大上?目前大公司的主流方案是OpenStack,比如某个公司的私有云