本文介绍如何利用高德地图API实现用户位置的精确定位，并通过逆地理编码将经纬度转换为详细地址信息。代码示例展示了如何在网页中嵌入地图、获取用户坐标及显示位置详情。
一、写代码前的准备
本次实例，采取高德地图的api辅助完成。
前往高德地图开发中心申请获取定位key。
二、demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<!--使用高德地图默认窗口-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 44px;
bottom: 0px;
text-align: center;
line-height: 300px;
background: #FFFFFF;
}
#cardDiv {
width: 80%;
position: fixed;
bottom: 5px;
height: 100px;
margin-left: 20px;
}
/*去掉 高德地图 图标 避免点击跳转*/
.amap-logo {
display: none ! important;
}
.amap-copyright {
display: none ! important;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">定位获取</h1>
<a class="mui-icon mui-icon-refresh mui-pull-right" id="refresh" style="display: none;">
<font size="3">刷新</font>
</a>
</header>
<div class="mui-content">
<!--地图显示容器-->
<div id="map"></div>
</div>
<div class="mui-content-padded">
<div class="input-card" style='width:28rem;' id="cardDiv">
<label style='color:grey'>逆地理编码，根据经纬度获取地址信息</label>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
<input id='lnglat' type="text" value='' disabled>
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">地址</span></div>
<input id='address' type="text" disabled>
</div>
</div>
</div>
</body>
<script src="../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
var maps = null;
var geolocation = null;
//使用者自身的经纬度信息
var user_longitude = null; //app用户的经度
var user_latitude = null; //app用户的纬度
var user_marker = null;
var geocoder = null; //地图逆编码
mui.init({
beforeback: function() {
console.log("点击了返回");
//fire事件
var parent = plus.webview.currentWebview().opener();
//进行自定义事件的绑定 并 进行数据的传递
mui.fire(parent, "getMaps", {
longitude: user_longitude,
lagitude: user_latitude,
address:document.getElementById("address").value
});
//返回父级页面
return true;
}
});
mui.plusReady(function() {
if(!maps) {
if(typeof(AMap) == "undefined") {
console.log("amap未定义");
mui.alert("请确保您的手机网络通信良好，\n并重新刷新此页面", "温馨提示", "确定", function() {}, "div");
//页面刚刚加载时 显示右上角刷新
$("#refresh").css("display", "block");
} else {
maps = new AMap.Map("map", {
zoom: 10, //移动端缩放级别[3,19] pc端缩放级别[3,18]
resizeEnable: true
});
//想要使用控件 就得先加载控件(比例尺 工具条等)
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', "AMap.Geolocation", "AMap.Geocoder"], function() { //异步加载插件
//放大 缩小 工具条
//maps.addControl(new AMap.ToolBar());
//比例尺
//maps.addControl(new AMap.Scale());
//编码转换工具类
geocoder = new AMap.Geocoder();
//定位
//若需要添加输入框 模糊查询位置时 需要修改buttonOffset的位置布局
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
buttonPosition: 'RT',
useNative: true,
showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
markerOptions: {
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
}, //设置 地图中心点图标标记marker
showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
panToLocation: true //定位成功后将定位到的位置作为地图中心点，默认：true
});
//将设置中的条件 绑定给maps上(如：设置中心点等) 当无此项时 可以用于单纯的获取经纬度信息
maps.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//地图点击事件
maps.on("click", function(e) {
console.log("地图点击事件：" + e.lnglat);
$("#lnglat").val(e.lnglat);
regeoCode();
});
}
}
//点击监听事件
document.getElementById("refresh").addEventListener("tap", function() {
console.log("点击刷新");
var self = plus.webview.currentWebview();
self.reload();
})
})
//解析定位结果
function onComplete(data) {
//成功回调时，将经纬度信息存入全局
user_longitude = data.position.getLng();
user_latitude = data.position.getLat();
console.log('经度：' + data.position.getLng());
console.log('纬度：' + data.position.getLat());
console.log('精度：' + data.accuracy + ' 米');
console.log("定位来源：" + data.location_type);
console.log("是否经过位置纠偏：" + data.isConverted);
//上面的位置信息获取中showCircle设置为false 所以此处需要进行视图显示放大操作
//获取经纬度信息后 设置地图中心点
var lnglat = [user_longitude, user_latitude];
maps.setZoomAndCenter(17, lnglat);
//用户当前位置标记
if(!user_marker) {
user_marker = new AMap.Marker({
position: [user_longitude, user_latitude]
});
maps.add(user_marker);
} else {
user_marker.setPosition(lnglat);
}
//显示经纬度信息至text中
$("#lnglat").val(lnglat);
//将当前的位置你编码显示再input中
regeoCode();
//经纬度获取成功回调时 需要将右上角隐藏
$("#refresh").css("display", "none");
}
//解析定位错误信息
function onError(data) {
//经纬度获取失败回调时 需要将右上角显示
$("#refresh").css("display", "block");
mui.alert("位置信息获取失败！", "温馨提示", "确定", function() {}, "div");
}
//通过经纬度获取详细位置信息封装方法
function regeoCode() {
if(!geocoder) {
geocoder = new AMap.Geocoder();
}
//var lnglat = document.getElementById('lnglat').value.split(',');
var lnglat = $("#lnglat").val().split(",");
//console.log("--->"+typeof(lnglat));
console.log("经度："+lnglat[0]);
console.log("纬度："+lnglat[1]);
//保存经纬度信息至全局
user_longitude = lnglat[0];
user_latitude = lnglat[1];
if(!user_marker) {
user_marker = new AMap.Marker();
map.add(user_marker);
}
user_marker.setPosition(lnglat);
geocoder.getAddress(lnglat, function(status, result) {
if(status === 'complete' && result.regeocode) {
console.log("-----"+JSON.stringify(result.regeocode))
var address = result.regeocode.formattedAddress;
document.getElementById('address').value = address;
} else {
console.log("编码转换："+JSON.stringify(result));
mui.alert("地址转换失败","温馨提示","确定",function(){},"div");
}
});
}
</script>
</html>
三、 测试
3.1、点击地图前
3.2、点击地图后
扫一扫
3278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
