【百度编辑器】-地图组件-添加周边信息【附近公交】-php手册-PHP中文网

首页

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:42 AM

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

代码修改：

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

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

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