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

jerry thinkphp 2015年11月19日收藏

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

代码修改：

主要是两个文件：
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 class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (430+4+210) + '" height="' + (mapHeight+4) + '"></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 width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>');

        }

    };

修改show.html

这里添加了一个div，用于展示公交信息

<body onload="initMap();">

<!--百度地图容器-->

<table>

    <tr>

        <td>

            <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

        </td>

        <td>

            <div style="width:200px;height:338px;float:left;border:#ccc solid 1px;over-flow:hodden;">

            <div style="width:100% ;height:32px;border-bottom:#ccc solid 1px;line-height:32px; font-weight: bold; padding-left:10px;background-color: #eee;">

                附近公交

            </div>

            <div id="busSite" style="padding:5px;font-size:14px;"></div>


            </div>

        </td>

    </tr>

</table>

</body>

    //创建和初始化地图函数：

    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属性

        }

    }