当前位置：首页 > news >正文

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

news 2025/7/4 17:44:11

本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面，如何通过点击地图获取经纬度和地理信息，以及如何实现模糊查询地址并在地图上标注。最后，提供了完整的代码示例，并总结了基于地图API进行地图位置选点的开发过程，帮助开发者快速上手并应用到实际项目中。

一、百度地图API介绍

百度地图API为开发者提供了强大的地理信息服务，可以轻松实现地图显示、位置选取、路线规划等功能。这里主要介绍2.0版本和3.0版本的功能示例，以及路书的介绍。

2.0 API

2.0版本的API功能相对较少，主要用于简单的地图展示和位置标注，以下是一个基本的示例：

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

3.0 API

3.0版本增加了更多的功能和优化，提升了地图加载速度和交互体验，以下是一个展示地图和标注的示例：

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提供的一种记录和展示路线的功能，可以用来展示旅游路线、出行规划等，以下是一个基本示例：

var driving = new BMap.DrivingRoute(map, {renderOptions: { map: map, autoViewport: true }
});
driving.search("起点", "终点");

本文将采用百度地图3.0 API来实现地图位置选点的功能，包括地图展示、点击地图选点、地理信息转经纬度、位置的模糊查询等。

二、初始化地图页面

首先，创建一个基本的HTML页面，并引入百度地图API：

<!DOCTYPE html>
<html>
<head><title>点击地图获取地址和经纬度</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>

实现效果：

在这里插入图片描述

三、增加地理信息模态框

在页面上方添加一个表单，用于显示和输入经纬度和地理信息：

<form><div class="input-group"><label for="lng">经度</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，给模态框留出空间，字体修改为40px，适应手机端页面。

修改及新增的CSS如下（没有修改的样式继续保留）：

  <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>

实现效果如图：

在这里插入图片描述

目前我们的表单还只是一个静态的，下面我们来实现给表单的动态赋值。

四、实现地图点击事件

下面，我们为地图添加点击事件，获取点击位置的经纬度，并通过 Geocoder 获取地理信息，将获取的经纬度填充到上方表单。

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;});
});

实现效果如图：

在这里插入图片描述

点击地图上位置时，会触发点击事件，自动为上方表单动态赋值经纬度。

接着，我们优化代码，打开页面时自动定位到我们的位置，并实现点击事件时经纬度、地址的填充。

JavaScript 内容全部替换为：

  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);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注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);}

实现效果如下：

在这里插入图片描述

至此，地图选取位置获得经纬度和地址信息的功能已经完成。

下面，我们来实现输入模糊地址来反向定位地图中的坐标，并获得精确的位置经纬度。

五、输入模糊地址定位地图坐标

通过Autocomplete实现地址模糊查询，并在选定地址后在地图上标注位置。

首先，我们给地址输入框的输入进行校验，增加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) {  //鼠标放在下拉列表上的事件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) {    //鼠标点击下拉列表后的事件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;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp));    //添加标注document.getElementById('lng').value = pp.lng;document.getElementById('lat').value = pp.lat;}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}

实现效果如下：

输入 “云龙湖”，会显示模糊查询到的地点。
在这里插入图片描述

选择地点，地图自动跳转到目标地点为中心的界面，显示目标点标注，并返回经纬度、详细地址给上方表单。

在这里插入图片描述

至此，输入模糊地址定位地图坐标的功能已经实现。

六、页面全部源码

下面是本文页面的全部代码，为了方便测试，已经把 JavaScript 和 CSS 与 Html 写在一个页面内。

完整的源码如下：

<!DOCTYPE htmlPUBLIC "-//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>点击地图获取地址和经纬度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">经度</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);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注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) {  //鼠标放在下拉列表上的事件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) {    //鼠标点击下拉列表后的事件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;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp));    //添加标注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>

七、可视化地图上位置选取功能总结

通过百度地图API，我们可以方便地实现地图位置选点的功能，提升用户体验。在本文中，我们介绍了如何构建基本的地图页面，如何实现点击地图获取经纬度和地理信息，以及通过模糊查询来标注地图位置。希望这篇教程能够帮助你快速上手百度地图API，并应用到实际项目中。

当然，地图的API还有很多，下面整理了一份目前市面上常用地图API对比，希望对你有所帮助。

地图API	提供商	主要功能	优点	缺点
百度地图API	百度	地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索	覆盖中国范围广，中文支持好，提供详细的中国本地数据	国际覆盖范围有限
谷歌地图API	Google	地图展示、位置选取、路线规划、地理编码、逆地理编码、街景服务	国际覆盖范围广，数据更新及时，街景服务优秀	国内使用受限
高德地图API	阿里巴巴	地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索	中国本地数据详细，支持多种出行方式	国际覆盖范围有限
腾讯地图API	腾讯	地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索	提供丰富的中国本地数据，接口简单易用	国际覆盖范围有限
OpenStreetMap API	OpenStreetMap	地图展示、位置选取、路线规划、地理编码、逆地理编码	免费且开源，数据覆盖全球，社区支持强	数据精度和更新频率可能不及商业地图API

这些API各有特点，开发者可以根据项目需求选择合适的地图API。百度地图、高德地图和腾讯地图在中国本地服务方面具有优势，而谷歌地图和OpenStreetMap在国际覆盖范围方面表现较好。

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

一、百度地图API介绍

二、初始化地图页面

三、增加地理信息模态框

四、实现地图点击事件

五、输入模糊地址定位地图坐标

六、页面全部源码

七、可视化地图上位置选取功能总结

相关文章：

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

ArcGIS Pro SDK （九）几何 13 多部件

【Node】npm i --legacy-peer-deps，解决依赖冲突问题

h5点击电话号跳转手机拨号

从数据湖到湖仓一体：统一数据架构演进之路

Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解

在python中使用正则表达式

华清数据结构day4 24-7-19

【深度学习图像】拼接图的切分

Covalent（CXT）运营商网络规模扩大 42%，以满足激增的需求

Java 集合框架：HashMap 的介绍、使用、原理与源码解析

单周期CPU（三）译码模块（minisys）（verilog）（vivado）

理想化相机模型的相机内参

【数据脱敏】⭐️SpringBoot 整合 Jackson 实现隐私数据加密

骑砍2霸主MOD开发(18)-多人联机模式开发环境搭建

【HZHY-AI300G智能盒试用连载体验】在华为IoTDA平台上建立设备

【LLM】-05-提示工程-部署Langchain-Chat

【漏洞复现】Next.js框架存在SSRF漏洞(CVE-2024-34351)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 小区小朋友统计(100分) - 三语言AC题解(Python/Java/Cpp)

Vuex看这一篇就够了

【Python】 -- 趣味代码 - 小恐龙游戏

从WWDC看苹果产品发展的规律

Debian系统简介

基于数字孪生的水厂可视化平台建设：架构与实践

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

【AI学习】三、AI算法中的向量

Ascend NPU上适配Step-Audio模型

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

【Android】Android 开发 ADB 常用指令

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释