高德地图LBS JS加载
------------------------------------------------------------UI---------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>逆地理编码</title>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=eef3aef43e18e80daeb9d67599861517"></script>
<link rel="stylesheet" type="text/css" href="modal-dialog/mdialog.css">
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" src="js/mui.min.js"></script>
<style type="text/css">
.mui-bar{
background:#5ab2e0;
}
.mui-title{
color:#FFFFFF;
}
footer{
text-align: center;
}
.mui-content{
height: 100%;
}
#mapContainer{
top: 0;
left: 0;
position: relative;
min-height:200px;
}
#scrollPos{
position: relative;
min-height: 200px;
}
.mui-table-view-cell{
margin-left:-10px;
}
.aFont{
font-size: 14px;
}
.mui-icon{
display:inline-block;
font-size:20px;
color: #5ab2e0;
}
span{
display: inline-block;
}
.display_none{
display:none;
}
.mui-btn-custom{
background:#5ab2e0;
margin-top:3px;
height:38px;
border-color: #0081C2 1px;
}
.between-space{
display:inline-block;
margin: 0px 5%;
}
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
<h1 class="mui-title">我的位置</h1>
</header>
<footer id="footer" class="mui-bar mui-bar-footer">
<button id="postion" class="mui-btn-custom">我的位置</button>
<span class="between-space"></span>
<button id="submitPos" class="mui-btn-custom">选定位置</button>
</footer>
<div id="mui-content" class="mui-content">
<div id="mapContainer"></div>
<div id="scrollPos" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="ulList" class="mui-table-view">
<!-- data template here-->
</ul>
</div>
</div>
</div> <!-- content end-->
<script type="text/javascript" src="modal-dialog/zepto.min.js"></script>
<script type="text/javascript" src="modal-dialog/mdialog.js"></script>
<script type='text/javascript' src='js/location.control.gelocation.js'></script>
</body>
</html> ---------------------------------------------------------Code-------------------------------------------------
- /* location.control.gelocation.js detail:
* the script bellow defined amount of function to get data about gelocation
* tips:
* before programe u need to add map display .css file && geolocation Key authorization to the file reference file
* #1 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
* #2 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=eef3aef43e18e80daeb9d67599861517"></script>
*/
// 当前点居中 ！
mui.plusReady(function(){
/* DOM ELEMENT */
var UI ={
header : document.getElementById("header"),
footer : document.getElementById("footer"),
divMapContainer : document.getElementById("mapContainer"),
divScrollPos : document.getElementById("scrollPos"),
btnPostion : document.getElementById("postion"),
btnSubmit : document.getElementById("submitPos"),
};
/* G variable */
var strErrorParamNotInvalid = 'ParamNotInvalid';
var strErrorDistancePointInvalid = 'DistancePointInvalid';
var posLngLat ={ //当前定位地图 点坐标 [经度,纬度]
Lng : undefined,
Lat : undefined
}
var geolocationObject = { //当前大区[省-城市-区|县]
province :undefined,
city :undefined,
district :undefined
};
var geolocation ; //浏览器定位插件类
var loadMask; //加载遮罩蒙版
var mapResetFlag = 0; //地图重置标志
//var callLocation = 0;
var map = new AMap.Map("mapContainer", {
resizeEnable: true, //缩放显示
zoom: 10 //地图显示的缩放级别
});
//地图中添加地图操作ToolBar插件
map.plugin(['AMap.ToolBar'], function() {
var toolBar = new AMap.ToolBar();
map.addControl(toolBar);
});
var GeolocationInit = function(){
if(!envirVariableCheck("RESET")){ return ;}
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy :true, //是否使用高精度定位，默认:true
timeout :5000, //超过10秒后停止定位，默认：无穷大
maximumAge :0, //定位结果缓存0毫秒，默认：0
convert :true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton :true, //显示定位按钮，默认：true
buttonPosition :'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset :new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker :false, //定位成功后在定位到的位置显示点标记，默认：true
showCircle :false, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation :true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy :true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//获取当前位置信息
geolocation.getCurrentPosition();
//缓冲加载界面
renderUI();
}
GeolocationInit();
function onComplete(data) {
console.log("#Plugin Geolocation Start tip:------OK-------");
posLngLat.Lng = data.position.getLng();
posLngLat.Lat = data.position.getLat();
map.getCity(function(data){
geolocationObject.province = data.province ||'';
geolocationObject.city = data.city ||'';
geolocationObject.district = data.district || '';
console.log("#Plugin Geolocation End tip:" + geolocationObject.province +
"-" + geolocationObject.city +
"-" + geolocationObject.district);
});
console.log("mask type:"+ typeof loadMask);
if(loadMask){
geocoder();
loadMask.close();
contentDisplay("show");
}
//watch postion
if(mapResetFlag == 1){
console.log("#Plugin Geolocation Start tip:----Reset OK----");
var targetPage = plus.webview.currentWebview();
mui.fire(targetPage,'newGeolocation',{
address:{
province:geolocationObject.province,
city :geolocationObject.city,
district:geolocationObject.district
},
posLngLat:{
Lng:posLngLat.Lng,
Lat:posLngLat.Lat
}
});
mapResetFlag = 0;
}
// if(callLocation == 1){
// callLocation = 0;
// alert('new LocationData:'+ geolocationStr+':'+posLng+':'+posLat);
// localStorage.setItem('geolocation',geolocationStr);
// localStorage.setItem('geolocationLng',posLng);
// localStorage.setItem('geolocationLat',posLat);
// var mainAbout = plus.webview.getWebviewById('main-about.html');
// if(mainAbout){
// mui.fire(mainAbout,'geolocationOK',{});
// }
// return ;
// }
//调节地图视图
console.log("map-zoom before:" + map.getZoom());
map.setZoom(16);
console.log("map-zoom after :" + map.getZoom());
};
//解析定位错误信息
function onError(data) {
var strError;
switch (data.info) {
case 'PERMISSION_DENIED':
strError = '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
strError = '无法获得当前位置';
break;
case 'TIMEOUT':
strError = '定位超时';
break;
default:
strError = '未知错误';
break;
}
mui.toast("#Plugin Geolocation ERROR tip:"+ strError);
}
//获取当前位置信息
// geolocation.getCurrentPosition();
// renderUI();
// geocoder();
// console.log("check object1:"+ (typeof geolocation));
function geolocate(){
if(!envirVariableCheck("CHECK")){
console.log("#Plugin Geolocation Start tip:------notComplete-------");
return;
}
//标记当前位置
map.clearMap();
console.log("纬度："+ posLngLat.Lng);
console.log("经度："+ posLngLat.Lat);
var center = new AMap.LngLat(parseFloat(posLngLat.Lng),parseFloat(posLngLat.Lat));
marker = new AMap.Marker({
position:center
});
map.setCenter(center);
marker.setMap(map);
}
function geocoder() {
console.log("当前坐标：posLngLat[" + posLngLat.Lng +','+ posLngLat.Lat +"]");
var lnglatXY = [posLngLat.Lng, posLngLat.Lat];
var MGeocoder;
//加载地理编码插件
AMap.service(["AMap.Geocoder"], function() {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//逆地理编码
MGeocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
});
map.setFitView();
}
//回调函数
function geocoder_CallBack(data) {
//当前地点
var address = data.regeocode.formattedAddress;
//当前详细坐标 li DOM节点 添加
var ulList = document.getElementById("ulList");
var liElem = document.createElement("li");
liElem.classList.add("mui-table-view-cell");
var spanElemLoc = document.createElement("span");
spanElemLoc.innerHTML= address;
var spanElemPic = document.createElement("span");
spanElemPic.classList.add("mui-icon");
spanElemPic.classList.add("mui-icon-location");
spanElemPic.classList.add("mui-pull-right");
var aElem = document.createElement("a");
aElem.classList.add("aFont");
aElem.setAttribute("Lng",posLngLat.Lng);
aElem.setAttribute("Lat",posLngLat.Lat);
aElem.appendChild(spanElemLoc);
aElem.appendChild(spanElemPic);
liElem.appendChild(aElem);
ulList.appendChild(liElem);
console.log("POSI数据条目："+data.regeocode.pois.length);
//POIS坐标 li DOM节点 添加
for (var j = 0; j < data.regeocode.pois.length; j++) {
liElem = document.createElement("li");
liElem.classList.add("mui-table-view-cell");
spanElemLoc = document.createElement("span");
spanElemLoc.innerHTML= data.regeocode.pois[j].name;
spanElemPic = document.createElement("span");
spanElemPic.classList.add("mui-icon");
spanElemPic.classList.add("mui-icon-location");
spanElemPic.classList.add("mui-pull-right");
spanElemPic.classList.add("display_none");
aElem = document.createElement("a");
aElem.setAttribute("Lng",data.regeocode.pois[j].location.getLng());
aElem.setAttribute("Lat",data.regeocode.pois[j].location.getLat());
aElem.classList.add("aFont");
aElem.appendChild(spanElemLoc);
aElem.appendChild(spanElemPic);
liElem.appendChild(aElem);
ulList.appendChild(liElem);
console.log("地点："+ data.regeocode.pois[j].name);
}
//区域滚动初始化
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
UIAdapter();
}
function UIAdapter(){
console.log(UI.header.clientHeight);
console.log(UI.footer.clientHeight);
console.log(UI.divMapContainer.clientHeight);
console.log(UI.divScrollPos.clientHeight);
console.log(plus.screen.resolutionHeight);
UI.divMapContainer.style.height = (plus.screen.resolutionHeight-2*UI.header.clientHeight)*0.6 + "px";
UI.divScrollPos.style.height = (plus.screen.resolutionHeight-2*UI.header.clientHeight)*(1-0.6) + "px";
}
function getDistance(PointStartX,PointStartY,PointEndX,PointEndY){
if(arguments.length < 4){
return strErrorParamNotInvalid;
}
if(PointStartX ==''||PointStartY ==''){
return strErrorDistancePointInvalid;
}
if(PointEndX == ''||PointEndY == '')
{
return strErrorDistancePointInvalid;
}
var gPointA = new AMap.LngLat(PointStartX, PointEndY);
var gPointB = new AMap.LngLat(PointEndX, PointEndY);
var distance = gPointA.distance(gPointB);
return distance;
}
var distanceUnit = {
distance:'0',
unit :'m'
}
function distanceTransition(meter){
if(meter > 1)
{
if(meter > 1000){
distanceUnit.distance = parseInt(meter/1000);
distanceUnit.unit = 'km';
}else{
distanceUnit.distance = parseInt(meter)
}
}else{
distanceUnit.distance = parseFloat(meter).toFixed(2);
}
}
window.addEventListener('gelocation',function(){
geolocation.getCurrentPosition();
callLocation = 1;
},false);
window.addEventListener('newGeolocation',function(event){
console.log("new geolocation:"+ event.detail.address.province);
console.log("new geolocation:"+ event.detail.address.city);
console.log("new geolocation:"+ event.detail.address.district);
console.log("new geolocation:"+ event.detail.posLngLat.Lng);
console.log("new geolocation:"+ event.detail.posLngLat.Lat);
},false);
UI.btnPostion.addEventListener('tap',function(event){
geolocate();
},false);
UI.btnSubmit.addEventListener('tap',function(event){
// geocoder();
watchPostion();
},false);
//选择地点事件
mui('#ulList').on('tap','a',function(event){
console.log("node:"+ this.childNodes.length);
clearLocationSpan();
for(var i=0; i<this.childNodes.length; i++){
console.log(this.childNodes[i].nodeName);
}
if(this.childNodes[1].classList.contains("display_none")){
this.childNodes[1].classList.remove("display_none");
}
var markerLng = this.getAttribute('Lng');
var markerLat = this.getAttribute('Lat');
console.log(markerLng);
console.log(markerLat);
setNewMarker(markerLng,markerLat);
});
//清除所有坐标图标
function clearLocationSpan(){
var collLocationSpan = document.querySelectorAll(".mui-icon-location");
console.log(collLocationSpan.length);
for(var i=0 ; i < collLocationSpan.length; i++){
if(!collLocationSpan[i].classList.contains("display_none")){
collLocationSpan[i].classList.add('display_none');
}
}
}
//描点新坐标
function setNewMarker(lng,lat){
var center = new AMap.LngLat(parseFloat(lng),parseFloat(lat));
map.clearMap();
marker = new AMap.Marker({
position:center
});
map.setCenter(center);
marker.setMap(map);
}
//地图显示控制
function renderUI(){
if(posLngLat.Lng == undefined || posLngLat.Lat == undefined){
contentDisplay("hide");
loadMask = new TipBox({type:'load',str:"努力加载中..",
setTime:5000,
callBack:function(maskSelf){}
});
}
}
function contentDisplay(displayItem){
if(displayItem == "show"){
UI.divMapContainer.style.display = 'block';
UI.divScrollPos.style.display = 'block';
}else{
UI.divMapContainer.style.display = 'none';
UI.divScrollPos.style.display = 'none';
}
}
function watchPostion(){
mapResetFlag = 1;
GeolocationInit();
}
function envirVariableCheck(checkKey){
if(checkKey == "RESET"){
if(geolocation != undefined){
map.removeControl(geolocation);
}
posLngLat.Lng = undefined;
posLngLat.Lat = undefined;
geolocation = undefined;
loadMask = undefined;
return true;
}else if(checkKey == "CHECK"){
if(posLngLat.Lng==undefined||posLngLat.Lat==undefined){
return false;
}
return true;
}
}
}) //plusReady --end
