您好,欢迎访问一九零五行业门户网

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

给百度编辑器的地图组件添加附近公交站的信息展示
效果图:
代码修改:
主要是两个文件:
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', ''); // 修改了这里,这里面的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', '');
        }
    };修改show.html
这里添加了一个div,用于展示公交信息
附近公交
//创建和初始化地图函数:
    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属性
        }
    }
ad:真正免费,域名+虚机+企业邮箱=0元
其它类似信息

推荐信息