前言
要說阿落在開發電商項目時，遇到頭疼的問題之一，那就是根據地址信息獲取經緯度。
在獲取經緯度時，在項目中一般有兩種處理方式。
一種是根據用戶填寫的詳細地址，去調用高德地圖的API獲取經緯度，這種一般作用於用戶收貨地址，然後用收貨地址來獲取經緯度，用來匹配最近的倉庫；
一種是在後台提供選擇地址的功能，通過輸入的地址或選取的地圖的點獲取經緯度，這種一般作用於倉庫定位、線下商家定位等；
這篇文章，阿落要說的就是第二種，在頁面中提供搜索地址或地圖選點的方式獲取經緯度。
1.實現目標
(1)輸入地址，獲取詳細地址與經緯度
當在後台編輯時，在文本框輸入完地址後，選擇目標地址或需要的地址，自動獲取該地址在地圖中的詳細地址字符串，以及該地址對應的經緯度；
圖片1
(2)輸入地址時對地址聯想
一個地址名詞，可能會有多處地方，當想不起來是在哪個區域時，就需要地圖來幫助我們智能聯想了。所以，當我們在文本框輸入地址後，自動聯想該地址關聯的地址列表，供我們參考或選擇。
圖片2
2.代碼實現
備註：前端框架使用的為LayUI
（1）Html代碼
<div class="layui-container" id="address-div" style="display: none;width: 800px;height: 600px;">
<div class="layui-card">
<div class="layui-card-body layui-form" style="padding: 15px;" lay-filter="address-table-form">
<div class="layui-form-item" style="text-align: center">
<div class="layui-input-block">
<div class="layui-input-block">
<button class="layui-btn" id="address-save" style="margin-left: -100px;">保存</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"> 詳細地址</label>
<!-- 這裡是地圖中的詳細地址、經緯度信息，都是只讀屬性，通過選取地址或選點的方式更新 -->
<div class="layui-input-block">
<input type="text" class="layui-input margin-input" id="address-detail"
name="address" readonly
style="display: inline;width: 58%" th:value="${mechanism.address}">
<input type="text" class="layui-input margin-input" id="lat"
name="latitude" readonly style="display: inline;width: 20%" />
<input type="text" class="layui-input margin-input" id="lng"
name="longitude" readonly style="display: inline;width: 20%" />
</div>
</div>
<!-- 省市區的級聯信息，可用來擴展保存 -->
<div class="layui-form-item">
<label class="layui-form-label"><span class="red">* </span>省市區</label>
<div class="layui-col-sm3">
<select name="province" id="province" data-type="province" data-click="province-clean">
<option value="">請選擇</option>
<option th:each="p : ${provinceList}" th:value="${p.id}" th:text="${p.name}"
th:selected="${#strings.equals(mechanism.province,p.id)}"></option>
</select>
</div>
<div class="layui-col-sm3" style="margin-left: 20px;">
<select id="city" name="city" data-type="city" data-click="city-clean">
<option th:each="c : ${cityList}" th:value="${c.id}" th:text="${c.name}"
th:selected="${#strings.equals(mechanism.city,c.id)}"></option>
</select>
</div>
<div class="layui-col-sm3" style="margin-left: 20px;">
<select id="area" name="district" data-type="area">
<option th:each="a : ${areaList}" th:value="${a.id}" th:text="${a.name}"
th:selected="${#strings.equals(mechanism.district,a.id)}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="red">* </span>輸入地址</label>
<div class="layui-input-block">
<!-- 輸入地址的文本框 -->
<input type="text" class="layui-input"
style="margin-bottom: 5px;width: 98%" id="tip-input" autocomplete="off"
placeholder="獲取經緯度定位以詳細地址為準">
<!-- 高德地圖顯示的容器 -->
<div id="container" style="width:600px; height: 350px; "></div>
</div>
</div>
</div>
</div>
</div>（2）JavaScript代碼
<!-- 引入的高德地圖JS，key為在高德開放平台申請後將會有對應信息 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=xxx"></script>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script>
$(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('詳細信息: <pre>' + info.name+'<br>'+info.address + '</pre>');
infoWindow.open(map, marker.getPosition());
// map.setCenter(marker.getPosition());
});
poiPicker.onCityReady(function() {
// poiPicker.suggest('');
marker.setMap(map);
infoWindow.setMap(map);
infoWindow.setContent('詳細信息: <pre>'+""+'</pre>');
infoWindow.open(map);
});
}
})
</script>4.結語
本篇內容就到這裡了，對於獲取經緯度，大家還有什麼更好的建議或方式嗎。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/251311.html
微信掃一掃 
支付寶掃一掃 