猫铃儿 Mao02 Logo

高山仰止,景行行止



富文本ueditor内置地图的使用,含三处bug

地图配置好不能正常取点,顺着源码摸索了一遍运行机制, - 渲染出弹出层,js渲染一个取点的modal - 选取点并将拼接的html返回给编辑器 两种可能 ``` var widget = editor.getWidgetData(widgetName), center = widget.map.getCenter(), zoom = widget.map.getZoom(), size = widget.map.getSize(), point = widget.marker.P; //将此处的P 改为point即可正常选点。 // 截图展示地图 if (widget.root().find(".edui-map-dynamic")[0].checked) { var URL = editor.getOpt('UMEDITOR_HOME_URL'), url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/map.html" + '#center=' + center.lng + ',' + center.lat, '&zoom=' + zoom, '&width=' + size.width, '&height=' + size.height, '&markers=' + point.lng + ',' + point.lat].join(''); editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '" frameborder="0" width="' + (size.width+4) + '" height="' + (size.height+4) + '"></iframe>'); } else { // 动态展示地图,插入地图时右上勾选。 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 + '"' + (widget.imgcss ? ' style="' + widget.imgcss + '"' : '') + '/>', true); } ``` 上面第六行处的P 改为point即可正常选点。 另一处 ``` var search = new BMap.LocalSearch(city, { onSearchComplete: function (results) { if (results && results.getNumPois()) { var points = []; for (var i = 0; i < results.getCurrentNumPois(); i++) { points.push(results.getPoi(i).point); } if (points.length > 1) { me.map.setViewport(points); } else { me.map.centerAndZoom(points[0], 13); } point = me.map.getCenter(); me.marker.setPoint(point); //此处改为setPosition } else { alert(me.lang.errorMsg); } } }); ``` 上面第14行处的 setPoint 改为setPosition即可正常选点。 另一处 ``` //创建和初始化地图函数: 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); // 将标注添加到地图中 if(iframe && UM && editor) { //在编辑状态下 setMapListener();//地图改变修改外层的iframe标签src属性 } else { document.focus(); // 此处改为 window.focus(); } } ``` 上面第25行处的 document.focus(); 改为 window.focus();。 因为是表单页面使用了layui,默认会把checkbox等隐藏,所以需要在map.js中修改checkbox的样式。 动态地图的key需要去map.html和map.js中修改,存在多处,用搜索看一下就好

作者  :  猫铃儿

PHP从业者,通晓linux服务器,python,nodejs等技术栈。



评论


博主:猫铃儿

性别:男

职业:php攻城狮

email:sinan00@qq.com

git:https://gitee.com/Mao02/

composer:https://packagist.org/packages/jayfun/

格言:如果你有梦想的话,就要去捍卫它

简介:野生程序员,php入行,吃力的走在全栈的路上

技能点: php javascript java python mysql