基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢(xún)
更新時(shí)間：2024年07月25日 09:10:42 作者：Damon小智
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁(yè)面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁(yè)面,如何通過(guò)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢(xún)地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來(lái)看看吧
引言
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁(yè)面中的地圖位置選取功能。本文逐步展示了如何構(gòu)建基本的地圖頁(yè)面，如何通過(guò)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息，以及如何實(shí)現(xiàn)模糊查詢(xún)地址并在地圖上標(biāo)注。最后，提供了完整的代碼示例，并總結(jié)了基于地圖API進(jìn)行地圖位置選點(diǎn)的開(kāi)發(fā)過(guò)程，幫助開(kāi)發(fā)者快速上手并應(yīng)用到實(shí)際項(xiàng)目中。
一、百度地圖API介紹
百度地圖API為開(kāi)發(fā)者提供了強(qiáng)大的地理信息服務(wù)，可以輕松實(shí)現(xiàn)地圖顯示、位置選取、路線規(guī)劃等功能。這里主要介紹2.0版本和3.0版本的功能示例，以及路書(shū)的介紹。
2.0 API
2.0版本的API功能相對(duì)較少，主要用于簡(jiǎn)單的地圖展示和位置標(biāo)注，以下是一個(gè)基本的示例：
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)化，提升了地圖加載速度和交互體驗(yàn)，以下是一個(gè)展示地圖和標(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);
百度路書(shū)
路書(shū)是百度地圖API提供的一種記錄和展示路線的功能，可以用來(lái)展示旅游路線、出行規(guī)劃等，以下是一個(gè)基本示例：
var driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: true }
});
driving.search("起點(diǎn)", "終點(diǎn)");
本文將采用百度地圖3.0 API來(lái)實(shí)現(xiàn)地圖位置選點(diǎn)的功能，包括地圖展示、點(diǎn)擊地圖選點(diǎn)、地理信息轉(zhuǎn)經(jīng)緯度、位置的模糊查詢(xún)等。
二、初始化地圖頁(yè)面
首先，創(chuàng)建一個(gè)基本的HTML頁(yè)面，并引入百度地圖API：
<!DOCTYPE html>
<html>
<head>
<title>點(diǎn)擊地圖獲取地址和經(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>
實(shí)現(xiàn)效果：
三、增加地理信息模態(tài)框
在頁(yè)面上方添加一個(gè)表單，用于顯示和輸入經(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 里。
同時(shí)，我們需要將地圖向下移動(dòng)240px，給模態(tài)框留出空間，字體修改為40px，適應(yīng)手機(jī)端頁(yè)面。
修改及新增的CSS如下（沒(méi)有修改的樣式繼續(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>
實(shí)現(xiàn)效果如圖：
目前我們的表單還只是一個(gè)靜態(tài)的，下面我們來(lái)實(shí)現(xiàn)給表單的動(dòng)態(tài)賦值。
四、實(shí)現(xiàn)地圖點(diǎn)擊事件
下面，我們?yōu)榈貓D添加點(diǎn)擊事件，獲取點(diǎn)擊位置的經(jīng)緯度，并通過(guò) 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;
});
});
實(shí)現(xiàn)效果如圖：
點(diǎn)擊地圖上位置時(shí)，會(huì)觸發(fā)點(diǎn)擊事件，自動(dòng)為上方表單動(dòng)態(tài)賦值經(jīng)緯度。
接著，我們優(yōu)化代碼，打開(kāi)頁(yè)面時(shí)自動(dòng)定位到我們的位置，并實(shí)現(xiàn)點(diǎn)擊事件時(shí)經(jīng)緯度、地址的填充。
JavaScript 內(nèi)容全部替換為：
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder(); //地址解析對(duì)象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 32); // 中心點(diǎn)
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)識(shí)
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);
}
//點(diǎn)擊地圖事件處理
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);
}
實(shí)現(xiàn)效果如下：
至此，地圖選取位置獲得經(jīng)緯度和地址信息的功能已經(jīng)完成。
下面，我們來(lái)實(shí)現(xiàn)輸入模糊地址來(lái)反向定位地圖中的坐標(biāo)，并獲得精確的位置經(jīng)緯度。
五、輸入模糊地址定位地圖坐標(biāo)
通過(guò)Autocomplete實(shí)現(xiàn)地址模糊查詢(xún)，并在選定地址后在地圖上標(biāo)注位置。
首先，我們給地址輸入框的輸入進(jìn)行校驗(yàn)，增加JavaScript代碼：
function validate() {
var sever_add = document.getElementsByName('sever_add')[0].value;
if (isNull(sever_add)) {
alert('請(qǐng)選擇地址');
return false;
}
return true;
}
//判斷是否是空
function isNull(a) {
return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;
}
}
接著，增加輸入后的下列框事件和下拉框點(diǎn)擊事件：
var ac = new BMap.Autocomplete( //建立一個(gè)自動(dòng)完成的對(duì)象
{
"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)點(diǎn)擊下拉列表后的事件
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; //獲取第一個(gè)智能搜索的結(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);
}
實(shí)現(xiàn)效果如下：
輸入 “云龍湖”，會(huì)顯示模糊查詢(xún)到的地點(diǎn)。
選擇地點(diǎn)，地圖自動(dòng)跳轉(zhuǎn)到目標(biāo)地點(diǎn)為中心的界面，顯示目標(biāo)點(diǎn)標(biāo)注，并返回經(jīng)緯度、詳細(xì)地址給上方表單。
至此，輸入模糊地址定位地圖坐標(biāo)的功能已經(jīng)實(shí)現(xiàn)。
六、頁(yè)面全部源碼
下面是本文頁(yè)面的全部代碼，為了方便測(cè)試，已經(jīng)把 JavaScript 和 CSS 與 Html 寫(xiě)在一個(gè)頁(yè)面內(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>點(diǎn)擊地圖獲取地址和經(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('請(qǐng)選擇地址');
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(); //地址解析對(duì)象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 32); // 中心點(diǎn)
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)識(shí)
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);
}
//點(diǎn)擊地圖事件處理
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( //建立一個(gè)自動(dòng)完成的對(duì)象
{
"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)點(diǎn)擊下拉列表后的事件
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; //獲取第一個(gè)智能搜索的結(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é)
通過(guò)百度地圖API，我們可以方便地實(shí)現(xiàn)地圖位置選點(diǎn)的功能，提升用戶(hù)體驗(yàn)。在本文中，我們介紹了如何構(gòu)建基本的地圖頁(yè)面，如何實(shí)現(xiàn)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息，以及通過(guò)模糊查詢(xún)來(lái)標(biāo)注地圖位置。希望這篇教程能夠幫助你快速上手百度地圖API，并應(yīng)用到實(shí)際項(xiàng)目中。
當(dāng)然，地圖的API還有很多，下面整理了一份目前市面上常用地圖API對(duì)比，希望對(duì)你有所幫助。
| 地圖API | 提供商 | 主要功能 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|---|---|
| 百度地圖API | 百度 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 覆蓋中國(guó)范圍廣，中文支持好，提供詳細(xì)的中國(guó)本地?cái)?shù)據(jù) | 國(guó)際覆蓋范圍有限 |
| 谷歌地圖API | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、街景服務(wù) | 國(guó)際覆蓋范圍廣，數(shù)據(jù)更新及時(shí)，街景服務(wù)優(yōu)秀 | 國(guó)內(nèi)使用受限 | |
| 高德地圖API | 阿里巴巴 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 中國(guó)本地?cái)?shù)據(jù)詳細(xì)，支持多種出行方式 | 國(guó)際覆蓋范圍有限 |
| 騰訊地圖API | 騰訊 | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼、POI搜索 | 提供豐富的中國(guó)本地?cái)?shù)據(jù)，接口簡(jiǎn)單易用 | 國(guó)際覆蓋范圍有限 |
| OpenStreetMap API | OpenStreetMap | 地圖展示、位置選取、路線規(guī)劃、地理編碼、逆地理編碼 | 免費(fèi)且開(kāi)源，數(shù)據(jù)覆蓋全球，社區(qū)支持強(qiáng) | 數(shù)據(jù)精度和更新頻率可能不及商業(yè)地圖API |
這些API各有特點(diǎn)，開(kāi)發(fā)者可以根據(jù)項(xiàng)目需求選擇合適的地圖API。百度地圖、高德地圖和騰訊地圖在中國(guó)本地服務(wù)方面具有優(yōu)勢(shì)，而谷歌地圖和OpenStreetMap在國(guó)際覆蓋范圍方面表現(xiàn)較好。
以上就是基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢(xún)的詳細(xì)內(nèi)容，更多關(guān)于JQuery HTML JavaScript地圖位置選取的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)京東查看商品點(diǎn)擊放大，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Js日期選擇器點(diǎn)擊并自動(dòng)加入到輸入框中方便輸入，不可多得，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
bootstrap3中container與container_fluid外層容器的區(qū)別講解
.container與.container_fluid是bootstrap中的兩種不同類(lèi)型的外層容器。這篇文章主要介紹了bootstrap3中container與container_fluid的區(qū)別,需要的朋友可以參考下2017-12-12
Vim是一個(gè)類(lèi)似于Vi的著名的功能強(qiáng)大、高度可定制的文本編輯器，在Vi的基礎(chǔ)上改進(jìn)和增加了很多特性.這篇文章主要介紹了Vim快速合并行及vim 將文件所有行合并到一行,需要的朋友可以參考下2017-11-11
原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能詳解【測(cè)試可用】
這篇文章主要介紹了原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑塊拖動(dòng)功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JavaScript小技巧,整理匯總了JavaScript常用的6個(gè)實(shí)用技巧,屬于JavaScript邊角技巧的總結(jié),需要的朋友可以參考下2015-12-12
js實(shí)現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
在開(kāi)發(fā)應(yīng)用中，經(jīng)常會(huì)遇到一些技術(shù)上的問(wèn)題，比如：怎樣讓js在文本框光標(biāo)處添加字符，本文將以此問(wèn)題進(jìn)行詳細(xì)介紹，需要了解的朋友可以參考下2012-11-11
JavaScript原型式繼承實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript原型式繼承實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
關(guān)于IE中g(shù)etElementsByClassName不能用的問(wèn)題解決方法
今天使用getElementsByClassName寫(xiě)了段小程序，在IE6、8中測(cè)試的時(shí)候就出現(xiàn)問(wèn)題了，瀏覽器報(bào)錯(cuò)，經(jīng)搜索找到了一個(gè)比較好的方法，是個(gè)老外寫(xiě)的一個(gè)方法2013-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04