【百度编辑器】-地图组件-添加周边信息【附近公交】

给百度编辑器的地图组件添加附近公交站的信息展示
效果图：




代码修改：

主要是两个文件：
Ueditor\dialogs\map\map.html （后台编辑模板）
Ueditor\dialogs\map\show.html （前台展示模板）

修改map.html：    function init(){<br>         var mapNode = editor.selection.getRange().getClosedNode(),<br>             isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),<br>             isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');<br>         if(isMapImg || isMapIframe){<br>             var url, centerPos, markerPos;<br>             if(isMapIframe) {<br>                 url = decodeURIComponent(mapNode.getAttribute("src"));<br>                 $G('is_dynamic').checked = true;<br>                 styleStr = mapNode.style.cssText;<br>             } else {<br>                 url = mapNode.getAttribute("src");<br>                 styleStr = mapNode.style.cssText;<br>             }<br> <br>             centerPos = getPars(url,"center").split(",");<br>             markerPos = getPars(url, "markers").split(",");<br>             point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1]));<br>             marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));<br>             map.addControl(new BMap.NavigationControl());<br>             map.centerAndZoom(point, Number(getPars(url,"zoom")));<br>         }else{<br>             var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),}); // 修改了这里，创建了自定义的标注图标<br>             point = new BMap.Point(120.621962,31.344312);    // 创建点坐标<br>             marker = new BMap.Marker(point,{icon:myIcon}); // 修改了这里，替换系统的标注图标<br>             map.addControl(new BMap.NavigationControl());<br>             map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。<br>         }<br>         marker.enableDragging();<br>         map.addOverlay(marker);<br>     }    dialog.onok = function (){<br>         var center = map.getCenter();<br>         var zoom = map.zoomLevel;<br>         var size = map.getSize();<br>         var mapWidth = size.width;<br>         var mapHeight = size.height;<br>         var point = marker.getPoint();<br> <br>         if($G('is_dynamic').checked) {<br>             var URL = editor.options.UEDITOR_HOME_URL,<br>                 url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +<br>                     '#center=' + center.lng + ',' + center.lat,<br>                     '&zoom=' + zoom,<br>                     '&width=' + 430, // 修改了这里，这里是地图的宽度，因为加了一个公交信息展示的div，所以我把地图宽度调小了点<br>                     '&height=' + mapHeight,<br>                     '&markers=' + point.lng + ',' + point.lat,<br>                     '&markerStyles=' + 'l,A'].join('');<br>             editor.execCommand('inserthtml', '<iframe></iframe>'); // 修改了这里，这里面的width="' + (430+4+210)；其中的430对应上面的宽度，210我加的div宽度<br>         } else {<br>             var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +<br>                     "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;<br>             editor.execCommand('inserthtml', '<img src="/static/imghw/default1.png" data-src="' + url + '" class="lazy" alt="【百度编辑器】-地图组件-添加周边信息【附近公交】" >');<br>         }<br>     };修改show.html

这里添加了一个div，用于展示公交信息<br> <!--百度地图容器--><br> <table> <br>     <tr> <br>         <td> <br>             <div></div> <br>         </td> <br>         <td> <br>             <div> <br>             <div> <br>                 附近公交<br>             </div> <br>             <div></div> <br> <br>             </div> <br>         </td> <br>     </tr> <br> </table> <br>     //创建和初始化地图函数：<br>     function initMap() {<br>         // [FF]切换模式后报错<br>         if (!window.BMap) {<br>             return;<br>         }<br>         var dituContent = document.getElementById('dituContent');<br>         dituContent.style.width = widthParam + 'px';<br>         dituContent.style.height = heightParam + 'px';<br> <br>         createMap();//创建地图<br>         setMapEvent();//设置地图事件<br>         addMapControl();//向地图添加控件<br> <br>         // 创建标注<br>         var markersArr = markersParam.split(',');<br>         var point = new BMap.Point(markersArr[0], markersArr[1]);<br>         // marker = new BMap.Marker(point);<br>         // marker.enableDragging();<br>         // map.addOverlay(marker); // 将标注添加到地图中<br>         <br>         // 这里开始下面，修改了标注图标<br>         var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),});<br>         var marker2 = new BMap.Marker(point,{icon:myIcon});  // 创建标注<br>         marker2.enableDragging();<br>         map.addOverlay(marker2); // 将标注添加到地图中<br> <br>         // 这里开始下面获取了周边公交信息<br>         var local = new BMap.LocalSearch(map, {<br>             renderOptions: {map: map, panel: "busSite"}<br>         }); // 这里的 panel: "busSite"，中的busSite 公交信息面板div的ID<br>         local.disableFirstResultSelection();<br>         local.setPageCapacity(5);<br>         local.searchNearby("公交",point,1000); // “公交” 可以改成别的试试！<br>         // 这里结束周边公交信息获取<br>         if(parent.editor && parent.document.body.contentEditable=="true") { //在编辑状态下<br>             setMapListener();//地图改变修改外层的iframe标签src属性<br>         }<br>     }

AD：真正免费，域名+虚机+企业邮箱=0元