實現效果：
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; }