实现效果：
map.js:
(function (win) {
function SurroundMap(mapId, lng, lat, searchCallback, options = {}) {
// 创建Map实例
let _this = this;
let map = new BMap.Map(mapId);
let point = new BMap.Point(lng, lat);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
// 设定1000米圆形范围
let circle = new BMap.Circle(point, 1000, {
fillColor: "blue",
strokeWeight: 1,
fillOpacity: 0.1,
strokeOpacity: 0.1
});
map.addOverlay(circle);
this.options = {};
this.options.pageCapacity = 50;
this.options.renderOptions = { map, autoViewport: false, selectFirstResult: false };
this.options.onSearchComplete = function (results) {
let resultList = [];
map.clearOverlays();
map.addOverlay(circle);
for (let item of results.Ir) {
resultList.push({
point: item.point,
title: item.title,
address: item.address,
distance: parseInt(map.getDistance(point, item.point))
});
}
//需要改变this指向
_this._insertSearchResult(_this._currentSelector, resultList);
searchCallback(_this._currentSelector, resultList);
}
$.extend(true, this.options, options || {});
let local = new BMap.LocalSearch(map, this.options);
this._map = map;
this._point = point;
this._local = local;
this._circle = circle;
return this;
}
SurroundMap.prototype = {
constructor: SurroundMap,
_range: 1000,
_searchNearby: function (keymaps, currentSelector) {
let localSearch = this._local;
let range = this._range;
let point = this._point;
this._currentSelector = currentSelector;
localSearch.searchNearby(keymaps, point, range);
},
_openInfoWindow: function (currentItem) {
let content = `
<div class="map-popup">
<div class="popup-title">${currentItem.title}</div>
<div class="popup-content">${currentItem.address}</div>
</div>
`;
let infowindow = new BMap.InfoWindow(content, { offset: new BMap.Size(0, -10) });
this._map.openInfoWindow(infowindow, currentItem.point);
return this;
},
_insertSearchResult: function (insertSelector, resultList) {
let _html = '';
if (resultList.length < 1) {
_html = '<li>范围内没有相应的周边内容, 看看其他的内容吧</li>';
} else {
for (const item of resultList) {
_html = _html +
`<li>
<p class="clearfix">
<span class="location fl"><i></i>${item.title}</span>
<span class="distance fr">${item.distance}米</span>
</p>
<p class="address">${item.address}</p>
</li>`;
}
}
$(insertSelector).html(_html);
return this;
}
}
win.SurroundMap = SurroundMap;
})(window)html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图预研</title>
<link rel="stylesheet" type="text/css" href="//static.fczx.com/www/css/_common.css">
<link rel="stylesheet" type="text/css" href="//static.fczx.com/www/css/_module.css">
<link rel="stylesheet" type="text/css" href="//static.fczx.com/www/css/module/map.css">
<script src="//static.fczx.com/www/js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kM1RFA6AzOnv6lmlc7qyOMhqBILu1pgk"></script>
</head>
<body>
<div class="box-content mt30">
<div class="box-surround table-detail">
<div class="table-detail-header">
<a href="" class="title">周边配套</a>
</div>
<div class="surround-content">
<div class="surround-map" id="surround-map"></div>
<div class="surround-mark">
<div class="surround-mark-tab">
<ul class="mark-tab-list" id="surroundMarkTab">
<li class="actived">交通</li>
<li>商业</li>
<li>学校</li>
<li>医院</li>
</ul>
</div>
<div class="surround-mark-content" id="surroundMarkContent">
<div class="mark-item has-tag" id="traffic">
<div class="item-tab">
<ul>
<li class="actived">公交</li>
<li>地铁</li>
<li>停车场</li>
<li>加油站</li>
</ul>
</div>
<ul class="item-list">
</ul>
</div>
<div class="mark-item has-tag" id="business">
<div class="item-tab">
<ul>
<li class="actived">超市</li>
<li>公园</li>
<li>餐饮</li>
<li>银行</li>
</ul>
</div>
<ul class="item-list">
</ul>
</div>
<div class="mark-item" id="school">
<ul class="item-list">
</ul>
</div>
<div class="mark-item" id="hospital">
<ul class="item-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="//static.fczx.com/www/js/common/map.js"></script>
<script type="text/javascript">
$(document).ready(function () {
let lng = 112.141744;
let lat = 32.097901;
let mapId = "surround-map";
let firstContentList = $('#surroundMarkContent .mark-item');
let secondContentList = $('#surroundMarkContent .mark-item .item-list');
// 实例化自定义地图函数
let surroundMap = new SurroundMap(mapId, lng, lat, searchCallback);
// 初始化地图搜索结果
firstContentList.eq(0).show();
surroundMap._searchNearby('公交', '#traffic .item-list');
// 搜索列表自定义信息弹窗
function searchCallback(currentSelector, resultList) {
$(`${currentSelector} li`).each(function (index) {
$(this).click(function () {
let currentItem = resultList[index];
surroundMap._openInfoWindow(currentItem);
})
});
}
//一级菜单事件处理及判断二级菜单
$('#surroundMarkTab>li').each(function (index) {
$(this).click(function () {
$(this).siblings().removeClass('actived');
$(this).addClass('actived');
firstContentList.hide();
// 获取一级菜单对应的content
let targetContent = firstContentList.eq(index);
targetContent.show();
// 判断是否有二级菜单
let secondTab = targetContent.find('.item-tab li');
let targetContentId = targetContent.attr("id");
let contentSelector = `#${targetContentId} .item-list`
if (secondTab.length > 0) {
let mapKey = secondTab.first().text();
surroundMap._searchNearby(mapKey, contentSelector);
return;
}
surroundMap._searchNearby($(this).text(), contentSelector);
});
});
//二级菜单点击事件处理
$('#surroundMarkContent .item-tab li').each(function () {
$(this).click(function () {
$(this).siblings().removeClass('actived');
$(this).addClass('actived');
//获取目标父元素
let targetId = $(this).parents('.mark-item').attr('id');
surroundMap._searchNearby($(this).text(), `#${targetId} .item-list`);
});
});
});
</script>
</html>css:
.surround-content {
position: relative;
height: 500px;
}
.surround-map {
height: 100%;
}
.surround-mark {
position: absolute;
right: 20px;
top: 20px;
height: 400px;
width: 400px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.surround-mark-tab .mark-tab-list {
height: 40px;
line-height: 40px;
border-bottom: 2px solid #11a43c;
color: #333;
background-color: #f2f2f2;
}
.surround-mark-tab .mark-tab-list li {
float: left;
width: 100px;
text-align: center;
cursor: pointer;
}
.surround-mark-tab .mark-tab-list li.actived {
color: #fff;
background-color: #11a43c;
}
.surround-mark-content {
width: 400px;
overflow: hidden;
}
.surround-mark-content .mark-item {
display: none;
color: #333;
}
.surround-mark-content .mark-item .item-empty {
height: 20px;
}
.surround-mark-content .mark-item .item-tab {
overflow: hidden;
padding: 12px 0 12px 20px;
border-bottom: 1px solid #f2f2f2;
}
.surround-mark-content .mark-item .item-tab li {
display: inline-block;
padding-right: 20px;
cursor: pointer;
}
.surround-mark-content .mark-item .item-tab li.actived {
color: #11a43c;
}
.surround-mark-content .mark-item .item-tab li:hover {
color: #11a43c;
}
.surround-mark-content .mark-item .item-list {
height: 345px;
overflow-y: auto;
}
.surround-mark-content .mark-item.has-tag .item-list {
height: 300px;
overflow-y: auto;
}
.surround-mark-content .mark-item .item-list li {
padding: 18px 20px;
border-bottom: 1px dashed #f2f2f2;
cursor: pointer;
}
.surround-mark-content .mark-item .item-list li:hover {
background-color: #f7f7f7;
}
.surround-mark-content .mark-item .item-list li .address {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.surround-mark-content .mark-item .item-list li i {
position: relative;
top: -2px;
float: left;
width: 24px;
height: 24px;
background: url("../../assets/icons/icon_map.png") no-repeat center center;
}
/*map info window content*/
.map-popup .popup-title {
color: #333;
line-height: 30px;
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #eee;
}
.map-popup .popup-content {
font-size: 12px;
line-height: 25px;
margin-top: 5px;
color: #999;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
