本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01高德地图输入经纬度查询位置-根据经纬度导航的窍门

序

开发设计相应新项目时碰到的一个头痛的情况是依据位置信息内容获取经纬度。

获取经纬度时，新项目中一般有2种处理方法。

一种是依据客户填好的具体地址，启用高德导航的API获取经纬度，一般功效于客户的收件地址，随后运用收件地址获取经纬度配对现在的库房；

一种是在后台管理给予挑选地点的作用，根据键入详细地址或挑选的地形图点获取经纬度，一般用以库房精准定位，线下推广商家精准定位等。

在这篇文章中，Alou想说的是第二个，即在网页页面中给予检索详细地址或在地图上挑选点来获取经纬度。

1.达到总体目标。

(1)键入详细地址，获得具体地址和地理坐标。

当在后台管理编写时，在输入框键入完详细地址后，挑选总体目标详细地址或必须的详细地址，全自动获得该详细地址在地形图中的具体地址字符串数组，及其该详细地址相匹配的地理坐标；在后台管理编写时，在输入框中键入详细地址后，挑选总体目标详细地址或必须的详细地址，全自动获得地形图中该详细地址的具体地址字符串数组及其该详细地址相匹配的地理坐标；

照片1

(2)键入详细地址时关系详细地址。

一个详细地址专有名词，很有可能会出现好几处地区，当记不起来是在哪一个地区时，就必须地形图来协助大家智能化想到了。因此，在我们在输入框键入详细地址后，全自动想到该详细地址关系的网址目录，供大家参照或挑选。一个叫法专有名词能够有很多部位。如果你不记得它在哪个地区时，你需要一张地形图来协助大家智能化地想到。因而，在我们在输入框中键入详细地址时，大家会全自动将详细地址目录与详细地址密切相关，以供大家参照或挑选。

照片2

2.编码完成。

注:前端框架选用layui。

(1)Html编码。

储存 具体地址 * 省市区 挑选 * 键入详细地址

(2)JavaScript编码。

$(document).ready(function () { let map = new AMap.Map('container', { resizeEnable: true, // 是不是监管地形图器皿规格转变 zoom: 11, // 原始地形图等级 //center: [116.397428, 39.90923] //复位地形图定位点 }); //监视，选定时获取经纬度信息内容 AMap.event.addListener(map, 'click', getLnglat); //依据键入的信息内容载入地形图UI AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) { let poiPicker = new PoiPicker({ // city:'北京市', input: 'tip-input' }); // 复位poiPicker poiPickerReady(poiPicker); }); //获取经纬度信息内容 function getLnglat(e) { map.clearMap(); var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); $("input[name=longitude]").val(e.lnglat.getLng()); $("input[name=latitude]").val(e.lnglat.getLat()); lnglatXY = new AMap.LngLat(x, y); geocoder(); } function geocoder() { var MGeocoder; //载入自然地理编号软件 map.plugin(["AMap.Geocoder"], function () { MGeocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); //回到自然地理编号結果 AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); //逆自然地理编号 MGeocoder.getAddress(lnglatXY); }); //加一点 var marker = new AMap.Marker({ map: map, icon: new AMap.Icon({ // image: " http://api.amap.com/Public/images/js/mark.png" , size: new AMap.Size(58, 30), imageOffset: new AMap.Pixel(-32, -0) }), position: lnglatXY, offset: new AMap.Pixel(-5, -30) }); } //调用函数 function geocoder_CallBack(data) { //回到详细地址叙述 var addr = data.regeocode.addressComponent; var cityId = addr.adcode; $("#address-detail").val(addr.township addr.street addr.streetNumber); } function poiPickerReady(poiPicker) { window.poiPicker = poiPicker; let marker = new AMap.Marker(); let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -20) }); // 选择了某一POI poiPicker.on('poiPicked', function(poiResult) { var source = poiResult.source, poi = poiResult.item, info = { source: source, id: poi.id, name: poi.name, location: poi.location.toString(), address: poi.address }; $("#address-detail").val(poi.address info.name); $("#lat").val(poi.location.lat); $("#lng").val(poi.location.lng); marker.setMap(map); infoWindow.setMap(map); marker.setPosition(poi.location); infoWindow.setPosition(poi.location); infoWindow.setContent('详细资料: ' info.name '
' info.address ''); infoWindow.open(map, marker.getPosition()); // map.setCenter(marker.getPosition()); }); poiPicker.onCityReady(function() { // poiPicker.suggest(''); marker.setMap(map); infoWindow.setMap(map); infoWindow.setContent('详细资料: ' " ''); infoWindow.open(map); }); } })

4.结果

文中告一段落。你有什么样的更强的提议或方式来获得经度和纬度吗？