黑马程序员技术交流社区

标题: 【太原校区】使用百度地图实现位置选择 [打印本页]

作者: 郝永亮 时间: 2018-9-8 09:32
标题: 【太原校区】使用百度地图实现位置选择
实现位置检索

在系统开发中我们经常需要确定一个单位或者是机器的地理位置，如果自己在地图上查找是比较小号时间的，这里可以根据百度地图的本地搜索服务根据关键字对于需要定位位置进行检索。

引入相关资源

1 2	<!-- 加载百度地图的api --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=对应的密钥"></script>

初始化地图容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="watchPage">
<div class="col-md-12">
<h3 align="center">
地位位置选择页面
</h3>
</div>
要定位的地址：
<input id="text_" type="text" style="margin-right: 100px;" />
<a class="btn btn-primary" onclick="searchLocationInfo();">查询</a>
<div id="container"
style="position: absolute; width: 96%; padding: 20px; height: 86%; top: 88; left: 20; border: 1px solid gray; overflow: hidden;">
</div>
</div>
</div>

初始化的的图配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var moid;
var poi;
var map = new BMap.Map("container");
var poi = new BMap.Point(112.560091, 37.879703);
map.centerAndZoom(poi, 12);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl( {
isOpen : true,
anchor : BMAP_ANCHOR_BOTTOM_RIGHT
})); //右下角，打开

定义本地检索服务

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

local = new BMap.LocalSearch(map, {
renderOptions : {
map : map,
autoViewport : true,
selectFirstResult : false
},
pageCapacity : 10
});
//定义地图上展示的marker标记
myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
new BMap.Size(23, 25), {
offset : new BMap.Size(10, 25),
imageOffset : new BMap.Size(0, 0 - 10 * 25)
});
//设置检索服务的返回的Marker标记的处理，并重新定义marker的弹出的infoWindow的内容，提供选择位置的按钮
loca.setMarkersSetCallback(function(pois) {
for ( var i = 0; i < pois.length; i++) {
      var markerInfo = pois;
      var marker = pois.marker;
      var address = markerInfo.address;
      var lng = markerInfo.point.lng;
      var lat = markerInfo.point.lat;
      var contents = "【"
      + markerInfo.title
      + "】, <a target='_blank' style='color:blue' href='"
      + markerInfo.detailUrl
      + "'>详情</a><br/><div style='color:gray;'>地址："
      + address
      + "</div>"
      + "<br/><a class='btn btn-info btn-block' onclick='chooselocation(\""
      + address + "\",\"" + lng + "\",\"" + lat
      + "\")'>选择</a>";
      marker.addEventListener("click", function(e) {
         var infoWindow = new BMap.InfoWindow(
            "<p style='font-size:14px;'>" + contents + "</p>");
         this.openInfoWindow(infoWindow);
      },false);
}
});
//设置检索服务的返回值的处理
local.setSearchCompleteCallback(function(searchResults) {
if (typeof (searchResults) == "undefined" || searchResults.Br.length<=0) {
com_div_msg("百度API没有搜索到该地址,建议手动选择地点进行设置");
return;
}
if (searchResults.length > 0) {
var searchResult = searchResults[0];
} else {
var searchResult = searchResults;
}

//设置第一个搜索结果为地图中心
var poi = searchResult.getPoi(0);
if (poi) {
//设置中心点
map.centerAndZoom(poi.point, 13);
}

});

设置地图点击事件

这里设置地图的点击事件，主要是为了如果百度地图检索不出来对应的地理位置的话，用户可以自己在地图上查找。

1
2
3
4
5
6
7

map.addEventListener("click", function(event) {
if(!event.overlay){
com_div_msg("温馨提示：请您自己输入安装位置");
chooselocation("", event.point.lng, event.point.lat);

}
});

[size=1em]这里需要注意的一点是因为地图上添加了点击事件，同时地图上的覆盖物marker也有点击事件，如果在map的点击事件中不进行判断的话，会首先执行map的点击事件，然后再执覆盖物的点击事件，所以在这里进行判断，如果点击事件中的event的overlay为空的话执行具体的逻辑，否则不执行。

查询方法

1
2
3

function searchLocationInfo() {
local.search($("#text_").val());
}

选择位置

1
2
3
4
5
6
7
8

var chooselocation = function(address, lng, lat) {
if (confirm("确定选择这里吗？")) {
$("#machineAddress").val(address);
$("#machineLongtitude").val(lng);
$("#machineLatitude").val(lat);
$("#closeMapBtn").click();
}
}

结果展示

常见问题https访问的问题

公司一直用的http的方式，当更换成https之后发现，原本在网页内显示的百度地图不见了。

【原因】https影响。

【解决办法】

将原来的http://api.map.baidu.com/api?v=2.0&ak=你的秘钥

变成：https://api.map.baidu.com/api?v=2.0&ak=你的秘钥&s=1就可以正常显示啦。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2