JQuery實現(xiàn)地圖坐標(biāo)拾取和地址模糊查詢功能
更新時間：2024年09月19日 15:16:11 作者：Damon小智
本文詳細(xì)介紹了使用JQuery、HTML和JavaScript實現(xiàn)移動端地圖位置選取的方法,內(nèi)容包括構(gòu)建地圖頁面、通過點擊獲取經(jīng)緯度、實現(xiàn)地址模糊查詢與標(biāo)注等功能,文章還提供了完整的代碼示例,并且介紹了百度地圖API的應(yīng)用,幫助開發(fā)者快速掌握地圖位置選點的開發(fā)技術(shù)
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實現(xiàn)移動端頁面中的地圖位置選取功能。本文逐步展示了如何構(gòu)建基本的地圖頁面，如何通過點擊地圖獲取經(jīng)緯度和地理信息，以及如何實現(xiàn)模糊查詢地址并在地圖上標(biāo)注。最后，提供了完整的代碼示例，并總結(jié)了基于地圖API進(jìn)行地圖位置選點的開發(fā)過程，幫助開發(fā)者快速上手并應(yīng)用到實際項目中。
一、百度地圖API介紹
百度地圖API為開發(fā)者提供了強大的地理信息服務(wù)，可以輕松實現(xiàn)地圖顯示、位置選取、路線規(guī)劃等功能。這里主要介紹2.0版本和3.0版本的功能示例，以及路書的介紹。
2.0 API
2.0版本的API功能相對較少，主要用于簡單的地圖展示和位置標(biāo)注，以下是一個基本的示例：
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);3.0 API
3.0版本增加了更多的功能和優(yōu)化，提升了地圖加載速度和交互體驗，以下是一個展示地圖和標(biāo)注的示例：
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);百度路書
路書是百度地圖API提供的一種記錄和展示路線的功能，可以用來展示旅游路線、出行規(guī)劃等，以下是一個基本示例：
var driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: true }
});
driving.search("起點", "終點");本文將采用百度地圖3.0 API來實現(xiàn)地圖位置選點的功能，包括地圖展示、點擊地圖選點、地理信息轉(zhuǎn)經(jīng)緯度、位置的模糊查詢等。
二、初始化地圖頁面
首先，創(chuàng)建一個基本的HTML頁面，并引入百度地圖API：
<!DOCTYPE html>
<html>
<head>
<title>點擊地圖獲取地址和經(jīng)緯度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&s=1"></script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.main-div {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
form {
background: #f8f8f8;
padding: 5px;
}
.input-group {
display: flex;
align-items: center;
margin-bottom: 5px;
}
label {
flex: 0 0 60px;
margin-right: 15px;
white-space: nowrap;
}
input[type="text"] {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
#allmap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<div class="main-div">
<div id="allmap"></div>
</div>
</body>
<script>
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
</script>
</html>實現(xiàn)效果：
三、增加地理信息模態(tài)框
在頁面上方添加一個表單，用于顯示和輸入經(jīng)緯度和地理信息：
<form>
<div class="input-group">
<label for="lng">經(jīng)度</label>
<input type="text" name="lng" id="lng" value="" readonly />
</div>
<div class="input-group">
<label for="lat">緯度</label>
<input type="text" name="lat" id="lat" value="" readonly />
</div>
<div class="input-group">
<label for="address">地址</label>
<input type="text" name="address" id="address" />
</div>
</form>將這段表單代碼加入到 main-div 里。
同時，我們需要將地圖向下移動240px，給模態(tài)框留出空間，字體修改為40px，適應(yīng)手機(jī)端頁面。
修改及新增的CSS如下（沒有修改的樣式繼續(xù)保留）：
<style>
label {
flex: 0 0 60px;
margin-right: 15px;
white-space: nowrap;
font-size: 40px;
}
input[type="text"] {
flex: 1;
padding: 10px;
box-sizing: border-box;
font-size: 40px;
}
#allmap {
width: 100%;
height: 100%;
position: absolute;
top: 240px;
}
.tangram-suggestion table {
width: 100% !important;
font-size: 32px !important;
line-height: 50px !important;
cursor: default !important;
}
.tangram-suggestion table tr td{
line-height: 40px !important;
height: 60px !important;
}
</style>實現(xiàn)效果如圖：
目前我們的表單還只是一個靜態(tài)的，下面我們來實現(xiàn)給表單的動態(tài)賦值。
四、實現(xiàn)地圖點擊事件
下面，我們?yōu)榈貓D添加點擊事件，獲取點擊位置的經(jīng)緯度，并通過 Geocoder 獲取地理信息，將獲取的經(jīng)緯度填充到上方表單。
JavaScript 里添加如下代碼：
map.addEventListener("click", function(e) {
document.getElementById('lng').value = e.point.lng;
document.getElementById('lat').value = e.point.lat;
var geoc = new BMap.Geocoder();
geoc.getLocation(e.point, function(rs) {
var addComp = rs.addressComponents;
document.getElementById('address').value = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
});
});實現(xiàn)效果如圖：
點擊地圖上位置時，會觸發(fā)點擊事件，自動為上方表單動態(tài)賦值經(jīng)緯度。
接著，我們優(yōu)化代碼，打開頁面時自動定位到我們的位置，并實現(xiàn)點擊事件時經(jīng)緯度、地址的填充。
JavaScript 內(nèi)容全部替換為：
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder(); //地址解析對象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 32); // 中心點
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
map.enableScrollWheelZoom(true);
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
map.addEventListener("click", showInfo);
//清除標(biāo)識
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
map.removeOverlay(markersArray[i])
}
}
}
//地圖上標(biāo)注
function addMarker(point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
clearOverlays();
map.addOverlay(marker);
}
//點擊地圖事件處理
function showInfo(e) {
document.getElementById('lng').value = e.point.lng;
document.getElementById('lat').value = e.point.lat;
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
document.getElementById('sever_add').value = address;
});
map.clearOverlays();
addMarker(e.point);
}實現(xiàn)效果如下：
至此，地圖選取位置獲得經(jīng)緯度和地址信息的功能已經(jīng)完成。
下面，我們來實現(xiàn)輸入模糊地址來反向定位地圖中的坐標(biāo)，并獲得精確的位置經(jīng)緯度。
五、輸入模糊地址定位地圖坐標(biāo)
通過Autocomplete實現(xiàn)地址模糊查詢，并在選定地址后在地圖上標(biāo)注位置。
首先，我們給地址輸入框的輸入進(jìn)行校驗，增加JavaScript代碼：
function validate() {
var sever_add = document.getElementsByName('sever_add')[0].value;
if (isNull(sever_add)) {
alert('請選擇地址');
return false;
}
return true;
}
//判斷是否是空
function isNull(a) {
return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;
}
}接著，增加輸入后的下列框事件和下拉框點擊事件：
var ac = new BMap.Autocomplete( //建立一個自動完成的對象
{
"input": "sever_add"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠標(biāo)放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
});
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠標(biāo)點擊下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地圖上所有覆蓋物
function myFun() {
var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結(jié)果
map.centerAndZoom(pp, 32);
map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注
document.getElementById('lng').value = pp.lng;
document.getElementById('lat').value = pp.lat;
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}實現(xiàn)效果如下：
輸入 “云龍湖”，會顯示模糊查詢到的地點。
選擇地點，地圖自動跳轉(zhuǎn)到目標(biāo)地點為中心的界面，顯示目標(biāo)點標(biāo)注，并返回經(jīng)緯度、詳細(xì)地址給上方表單。
至此，輸入模糊地址定位地圖坐標(biāo)的功能已經(jīng)實現(xiàn)。
六、頁面全部源碼
下面是本文頁面的全部代碼，為了方便測試，已經(jīng)把 JavaScript 和 CSS 與 Html 寫在一個頁面內(nèi)。
完整的源碼如下：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>點擊地圖獲取地址和經(jīng)緯度map，address，lng，lat</title>
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&s=1"></script>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.main-div {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
form {
background: #f8f8f8;
padding: 5px;
}
.input-group {
display: flex;
align-items: center;
margin-bottom: 5px;
}
label {
flex: 0 0 60px;
margin-right: 15px;
white-space: nowrap;
font-size: 40px;
}
input[type="text"] {
flex: 1;
padding: 10px;
box-sizing: border-box;
font-size: 40px;
}
#allmap {
width: 100%;
height: 100%;
position: absolute;
top: 240px;
}
.tangram-suggestion table {
width: 100% !important;
font-size: 32px !important;
line-height: 50px !important;
cursor: default !important;
}
.tangram-suggestion table tr td{
line-height: 40px !important;
height: 60px !important;
}
</style>
</head>
<body>
<div class="main-div">
<form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
<div class="input-group">
<label for="lng">經(jīng)度</label>
<input type="text" name="lng" id="lng" value="" readonly/>
</div>
<div class="input-group">
<label for="lat">緯度</label>
<input type="text" name="lat" id="lat" value="" readonly/>
</div>
<div class="input-group">
<label for="sever_add">地址</label>
<input type="text" name="sever_add" id="sever_add" value="" />
</div>
</form>
<div id='allmap'></div>
</div>
</body>
<script type="text/javascript">
function validate() {
var sever_add = document.getElementsByName('sever_add')[0].value;
if (isNull(sever_add)) {
alert('請選擇地址');
return false;
}
return true;
}
//判斷是否是空
function isNull(a) {
return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;
}
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder(); //地址解析對象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 32); // 中心點
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
map.enableScrollWheelZoom(true);
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
map.addEventListener("click", showInfo);
//清除標(biāo)識
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
map.removeOverlay(markersArray[i])
}
}
}
//地圖上標(biāo)注
function addMarker(point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
clearOverlays();
map.addOverlay(marker);
}
//點擊地圖事件處理
function showInfo(e) {
document.getElementById('lng').value = e.point.lng;
document.getElementById('lat').value = e.point.lat;
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
document.getElementById('sever_add').value = address;
});
map.clearOverlays();
addMarker(e.point);
}
var ac = new BMap.Autocomplete( //建立一個自動完成的對象
{
"input": "sever_add"
, "location": map
});
ac.addEventListener("onhighlight", function (e) { //鼠標(biāo)放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
});
var myValue;
ac.addEventListener("onconfirm", function (e) { //鼠標(biāo)點擊下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地圖上所有覆蓋物
function myFun() {
var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結(jié)果
map.centerAndZoom(pp, 32);
map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注
document.getElementById('lng').value = pp.lng;
document.getElementById('lat').value = pp.lat;
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>
</html>七、可視化地圖上位置選取功能總結(jié)
通過百度地圖API，我們可以方便地實現(xiàn)地圖位置選點的功能，提升用戶體驗。在本文中，我們介紹了如何構(gòu)建基本的地圖頁面，如何實現(xiàn)點擊地圖獲取經(jīng)緯度和地理信息，以及通過模糊查詢來標(biāo)注地圖位置。希望這篇教程能夠幫助你快速上手百度地圖API，并應(yīng)用到實際項目中。
當(dāng)然，地圖的API還有很多，下面整理了一份目前市面上常用地圖API對比，希望對你有所幫助。
| 地圖API | 提供商 | 主要功能 | 優(yōu)點 | 缺點 |
|---|---|---|---|---|
| 百度地圖API | 百度 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 覆蓋中國范圍廣，中文支持好，提供詳細(xì)的中國本地數(shù)據(jù) | 國際覆蓋范圍有限 |
| 谷歌地圖API | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、街景服務(wù) | 國際覆蓋范圍廣，數(shù)據(jù)更新及時，街景服務(wù)優(yōu)秀 | 國內(nèi)使用受限 | |
| 高德地圖API | 阿里巴巴 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 中國本地數(shù)據(jù)詳細(xì)，支持多種出行方式 | 國際覆蓋范圍有限 |
| 騰訊地圖API | 騰訊 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 提供豐富的中國本地數(shù)據(jù)，接口簡單易用 | 國際覆蓋范圍有限 |
| OpenStreetMap API | OpenStreetMap | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼 | 免費且開源，數(shù)據(jù)覆蓋全球，社區(qū)支持強 | 數(shù)據(jù)精度和更新頻率可能不及商業(yè)地圖API |
這些API各有特點，開發(fā)者可以根據(jù)項目需求選擇合適的地圖API。百度地圖、高德地圖和騰訊地圖在中國本地服務(wù)方面具有優(yōu)勢，而谷歌地圖和OpenStreetMap在國際覆蓋范圍方面表現(xiàn)較好。
到此這篇關(guān)于JQuery實現(xiàn)地圖坐標(biāo)拾取和地址模糊查詢的文章就介紹到這了,更多相關(guān)jquery地址模糊查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
jQuery+正則+文本框只能輸入數(shù)字的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文為大家詳細(xì)介紹下父窗口中操作iframe、在子窗口中操作父窗口，獲取iframe內(nèi)的dom對象有兩種方法，感興趣的朋友可以了解下哈，希望對大家有所幫助2013-07-07
jQuery事件_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery事件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
基于json的jquery地區(qū)聯(lián)動效果代碼
貼一個基于jquery聯(lián)動的代碼，相信這樣的代碼有一大把，就當(dāng)是jquery的練手吧2011-07-07
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實例形式詳細(xì)分析了jQuery選擇器的基本功能、使用方法及操作注意事項,需要的朋友可以參考下2020-01-01
下面小編就為大家?guī)硪黄猨Query的實例及必知重要的jQuery選擇器詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery限制輸入字?jǐn)?shù),并提示剩余字?jǐn)?shù)實現(xiàn)代碼
jquery限制輸入字?jǐn)?shù),并提示剩余字?jǐn)?shù),本文將介紹如何實現(xiàn)這個功能，需要了解的朋友可以參考下2012-12-12
這篇文章主要為大家詳細(xì)介紹了Jquery實現(xiàn)多選下拉列表左右移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
下面小編就為大家?guī)硪黄钊肜斫鈐Query事件綁定。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
下面小編就為大家?guī)硪黄猨Query之簡單的表單驗證實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07