从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

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

作者：从前慢现在也慢 | 2024-07-24 13:15:36

踩

百度地图

本文详细讲解了如何使用 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);
1
2
3

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);
1
2
3
4
5

百度路书

路书是百度地图API提供的一种记录和展示路线的功能，可以用来展示旅游路线、出行规划等，以下是一个基本示例：

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

本文将采用百度地图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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

实现效果：

在这里插入图片描述

三、增加地理信息模态框

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

将这段表单代码加入到 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

实现效果如图：

在这里插入图片描述

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

四、实现地图点击事件

下面，我们为地图添加点击事件，获取点击位置的经纬度，并通过 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;
  });
});
1
2
3
4
5
6
7
8
9

实现效果如图：

在这里插入图片描述

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

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

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);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

实现效果如下：

在这里插入图片描述

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

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

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

通过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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

接着，增加输入后的下列框事件和下拉框点击事件：


  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);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

实现效果如下：

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

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

在这里插入图片描述

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

六、页面全部源码

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

完整的源码如下：

<!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>点击地图获取地址和经纬度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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

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

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/874883