MUI框架—实现百度地图定位功能
百度坐标定位和Google定位有偏差，但是mui不能用Google定位，围栏能让app百度定位和cesiume（使用的是Google卫星地图）中的定位吻合（偏差也是有的，但是可以接受，室内偏差会大点），在app上显示百度定位，将高德定位传到后台显示gis定位
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 id="title" class="mui-title">百度地图定位</h1>
</header>
<div style="position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;" id="allmap">
地图加载中...
</div>
</body>
<!-- 百度地图定位 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<!-- 高德定位 -->
<script language=javascript src='http://webapi.amap.com/maps?v=1.3&amp;key=8354c88fb8950af35a1aacfac61c32e5'></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/dist/wacommon.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
plus.geolocation.getCurrentPosition(translatePoint,function(e){
mui.toast("异常:" + e.message);
});
getAddress();//高德定位
});
function translatePoint(position){
var currentLon = position.coords.longitude;
var currentLat = position.coords.latitude;
var gpsPoint = new BMap.Point(currentLon,currentLat);
BMap.Convertor.translate(gpsPoint,0,initMap);//真实经纬度转成百度坐标
其中gpsPoint var gpsPoint = new BMap.Point(经度,纬度); ( GPS坐标) 0：代表百度，也可以是2：google坐标 initMap：回掉函数
}
function initMap(point){
map = new BMap.Map("allmap"); //创建地图
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point,15);
console.log(JSON.stringify(point))
/* //BD-09 to GCJ-02(BD-09：百度坐标偏移标准，Baidu Map使用)
var p = GPS.bd_decrypt(point.lng,point.lat)
console.log("--------------"+JSON.stringify(p))
//GCJ-02 to WGS-84
var p2 = GPS.gcj_decrypt_exact(p.lng,p.lat)
console.log(JSON.stringify(p2)) */
map.addOverlay(new BMap.Marker(point));
}
var GPS = {
PI : 3.14159265358979324,
x_pi : 3.14159265358979324 * 3000.0 / 180.0,
delta : function (lat, lng) {
// Krasovsky 1940
//
// a = 6378245.0, 1/f = 298.3
// b = a * (1 - f)
// ee = (a^2 - b^2) / a^2;
var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
var dLat = this.transformLat(lng - 105.0, lat - 35.0);
var dLng = this.transformLng(lng - 105.0, lat - 35.0);
var radLat = lat / 180.0 * this.PI;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
return {'lat': dLat, 'lng': dLng};
},
//WGS-84 to GCJ-02
gcj_encrypt : function (wgsLat, wgsLng) {
if (this.outOfChina(wgsLat, wgsLng))
return {'lat': wgsLat, 'lng': wgsLng};
var d = this.delta(wgsLat, wgsLng);
return {'lat' : Number(wgsLat) + Number(d.lat),'lng' : Number(wgsLng) + Number(d.lng)};
},
//GCJ-02 to WGS-84
gcj_decrypt : function (gcjLat, gcjLng) {
if (this.outOfChina(gcjLat, gcjLng))
return {'lat': gcjLat, 'lng': gcjLng};
var d = this.delta(gcjLat, gcjLng);
return {'lat': Number(gcjLat) - Number(d.lat), 'lng': Number(gcjLng) - Number(d.lng)};
},
//GCJ-02 to WGS-84 exactly
gcj_decrypt_exact : function (gcjLat, gcjLng) {
var initDelta = 0.01;
var threshold = 0.000000001;
var dLat = initDelta, dLng = initDelta;
var mLat = gcjLat - dLat, mLng = gcjLng - dLng;
var pLat = gcjLat + dLat, pLng = gcjLng + dLng;
var wgsLat, wgsLng, i = 0;
while (1) {
wgsLat = (mLat + pLat) / 2;
wgsLng = (mLng + pLng) / 2;
var tmp = this.gcj_encrypt(wgsLat, wgsLng)
dLat = tmp.lat - gcjLat;
dLng = tmp.lng - gcjLng;
if ((Math.abs(dLat) < threshold) && (Math.abs(dLng) < threshold))
break;
if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
if (dLng > 0) pLng = wgsLng; else mLng = wgsLng;
if (++i > 10000) break;
}
//console.log(i);
return {'lat': wgsLat, 'lng': wgsLng};
},
//GCJ-02 to BD-09
bd_encrypt : function (gcjLat, gcjLng) {
var x = gcjLng, y = gcjLat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
bdLng = z * Math.cos(theta) + 0.0065;
bdLat = z * Math.sin(theta) + 0.006;
return {'lat' : bdLat,'lng' : bdLng};
},
//BD-09 to GCJ-02
bd_decrypt : function (bdLat, bdLng) {
var x = bdLng - 0.0065, y = bdLat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
var gcjLng = z * Math.cos(theta);
var gcjLat = z * Math.sin(theta);
return {'lat' : gcjLat, 'lng' : gcjLng};
},
//WGS-84 to Web mercator
//mercatorLat -> y mercatorLng -> x
mercator_encrypt : function(wgsLat, wgsLng) {
var x = wgsLng * 20037508.34 / 180.;
var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
y = y * 20037508.34 / 180.;
return {'lat' : y, 'lng' : x};
/*
if ((Math.abs(wgsLng) > 180 || Math.abs(wgsLat) > 90))
return null;
var x = 6378137.0 * wgsLng * 0.017453292519943295;
var a = wgsLat * 0.017453292519943295;
var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
return {'lat' : y, 'lng' : x};
//*/
},
// Web mercator to WGS-84
// mercatorLat -> y mercatorLng -> x
mercator_decrypt : function(mercatorLat, mercatorLng) {
var x = mercatorLng / 20037508.34 * 180.;
var y = mercatorLat / 20037508.34 * 180.;
y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
return {'lat' : y, 'lng' : x};
/*
if (Math.abs(mercatorLng) < 180 && Math.abs(mercatorLat) < 90)
return null;
if ((Math.abs(mercatorLng) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
return null;
var a = mercatorLng / 6378137.0 * 57.295779513082323;
var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
return {'lat' : y, 'lng' : x};
//*/
},
// two point's distance
distance : function (latA, lngA, latB, lngB) {
var earthR = 6371000.;
var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lngA - lngB) * this.PI / 180);
var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
var s = x + y;
if (s > 1) s = 1;
if (s < -1) s = -1;
var alpha = Math.acos(s);
var distance = alpha * earthR;
return distance;
},
outOfChina : function (lat, lng) {
if (lng < 72.004 || lng > 137.8347)
return true;
if (lat < 0.8293 || lat > 55.8271)
return true;
return false;
},
transformLat : function (x, y) {
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
return ret;
},
transformLng : function (x, y) {
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
return ret;
}
};
function getAddress(){
var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container');
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation();
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', function(position){
console.log("打印定位信息"+JSON.stringify(position.position));
}); // 返回定位信息
AMap.event.addListener(geolocation, 'error', function(){
console.log('定位失败');
}); // 返回定位出错信息
});
}
</script>
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
