您当前的位置：主页 > 技术探讨 >
高德地图 地址定位搜索 得到经纬度
时间：2021-07-16 12:49 日记人：arlen.zhou
高德地图 地址定位搜索 得到经纬度 现成的代码 开箱及用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
<style>
#iMap {
height: 450px;
width: 800px;
position: absolute;
margin-left: 100px;
margin-top: 15px;
margin-bottom: 25px;
z-index: 999999;
}
.info {
float: left;
margin: 0 0 0 10px;
}
label {
width: 80px;
float: left;
}
.detail {
padding: 10px;
border: 1px solid #aaccaa;
}
.layui-btn-te {
margin-top: 500px;
}
input{
width: 450px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">企业名称</label>
<div class="layui-input-block">
<input type="text" name="title" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="number" name="mobile" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">详细地址</label>
<div class="layui-input-block">
<input type="text" id="particular_site" name="particular_site" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">经纬度</label>
<div class="layui-input-block">
<input type="text" name="longitude" id="longitude" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
class="layui-input">
</div>
</div>
<input type="hidden" name="lng" id="lng" value="">
<input type="hidden" name="lat" id="lat" value="">
<div class="layui-form-item">
<label class="layui-form-label">搜索地址</label>
<div class="layui-input-block">
<input type="text" id="addressBox" autocomplete="off" placeholder="可搜索地址" class="layui-input">
<button type="button" onclick="geocoder();" class="layui-btn layui-btn-primary layui-btn-position">搜索</button>
</div>
</div>
<div id="iMap"></div>
</body>
</html>
<script language="javascript">
var addressBox = document.getElementById('addressBox');
var longitude = document.getElementById('longitude').value;
var lng = document.getElementById('lng').value;
var lat = document.getElementById('lat').value;
var mapObj;
var lnglatXY;
//初始化地图
function mapInit(x, y) {
mapObj = new AMap.Map("iMap", {
zoom: 16,
center: new AMap.LngLat(x, y)
});
AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
punctuation(x, y);
}
//标点展示
function punctuation(x, y) {
var marker = new AMap.Marker({
map: mapObj,
position: [x, y]
});
}
if (longitude != "") {
mapInit(lng, lat);
} else {
mapInit(104.069738, 30.584609);
}
function geocoder() {
mapObj.clearMap();
var myGeo = new AMap.Geocoder();
//地理编码,返回地理编码结果
myGeo.getLocation(addressBox.value, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// var address = data.regeocode.formattedAddress;
var x = result.geocodes[0].location.lng;
var y = result.geocodes[0].location.lat;
// document.getElementById("particular_site").value = address;
document.getElementById("longitude").value = x + "," + y; //经纬度
document.getElementById("lng").value = x; //经度
document.getElementById("lat").value = y; //纬度
var XY = [x, y];
mapInit(x, y);
regeocoder(XY);
punctuation(x, y); //更新标记
} else {
//地址解析失败
alert("地址不存在")
}
});
}
//鼠标点击，获取经纬度坐标
function getLnglat(e) {
mapObj.clearMap();
console.log(e);
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("longitude").value = x + "," + y; //经纬度
document.getElementById("lng").value = x; //经度
document.getElementById("lat").value = y; //纬度
var XY = [x, y];
regeocoder(XY);
punctuation(x, y); //更新标记
lnglatXY = new AMap.LngLat(x, y);
}
//地址详细描述
function regeocoder(loc) { //逆地理编码
console.log(loc);
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(loc, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
}
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
document.getElementById("particular_site").value = address;
console.log(address)
}
</script>