【转】百度UEditor控件中的map组件不支持https使用的问题解决

原文地址：https://blog.csdn.net/stacy06/article/details/82626363

最近项目部署到了https环境下，使用的UEditor富文本编辑器中的map组件出现了问题，控制台报了一堆错误，主要是mixed content.. ，就连百度的官网上也同样是有这些问题，汗。。

没有办法，只能四处搜索解决问题的答案。。。

第一点收获：

https是安全传输协议，在这个协议下传输的网页不允许包含http协议这类不安全的内容。

HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被浏览器直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。也就是报mixed content，

解决方法：页面的head中加入以下代码

意思是自动将http的不安全请求升级为https

第二点收获：

上面设置完成之后页面上的内容被自动从http协议改成了https协议，但是百度地图的应用还是有问题，百度地图的瓦片加载不出来，发现这些瓦片被自动改成https之后是不存在的。。也就是说这些地图瓦片是只部署在http下的，这可怎么办，难道百度地图不支持https吗。。这不应该啊

又一通查找搜索之后。。。。找到百度地图切换https协议的方案：

将地图的js引用稍加修改，http-->https，后面参数加上&s=1，如此就支持https了

第三点：

但是还是没有完全解决，最后查看我用的Ueditor中用的百度地图的版本太低了。。v=1.1的，改成2.0的试试吧，https的相关问题终于没有了，但是有一些百度地图的api没有了。。。

应该是2.0相比于1.1的api还是有些变化的吧，再查看百度地图的官方文档，把功能类似的api修改了一下，呼呼。。最后问题终于解决了。

主要修改map.html中的内容罗如下：

map.htm地址为：/ueditor/dialogs/map/map.html

1、页面的head中加入以下代码

2、修改百度地图js引用方式：

修改前：

修改后：

3、修改1.1到2.0升级的部分api：

1）在Ueditor包的map组件的map.html中

2）在Ueditor包的map组件的show.html中

修改js引用方式

最后，大功告成啦

---------------------
作者：小牛1213
来源：CSDN
原文：https://blog.csdn.net/stacy06/article/details/82626363
版权声明：本文为博主原创文章，转载请附上博文链接！

修改后的map.html文件

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script type="text/javascript" src="../internal.js"></script>

     <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>-->

     <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度密匙&s=1"></script>

     <style type="text/css">

         .content {

             width: 530px;

             height: 350px;

             margin: 10px auto;

         }

             .content table {

                 width: 100%

             }

                 .content table td {

                     vertical-align: middle;

                 }

         #city, #address {

             height: 21px;

             background: #FFF;

             border: 1px solid #d7d7d7;

             line-height: 21px;

         }

         #city {

             width: 60px

         }

         #address {

             width: 130px

         }

         #is_dynamic_label span {

             vertical-align: middle;

             margin: 3px 0px 3px 3px;

         }

         #is_dynamic_label input {

             vertical-align: middle;

             margin: 3px 3px 3px 50px;

         }

     </style>

 </head>

 <body>

 <div class="content">

     <table>

         <tr>

             <td><var id="lang_city"></var>:</td>

             <td><input id="city" type="text" /></td>

             <td><var id="lang_address"></var>:</td>

             <td><input id="address" type="text" value="" /></td>

             <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>

             <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>

         </tr>

     </table>

     <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>

 </div>

 <script type="text/javascript">

     var map = new BMap.Map("container"),marker,point,styleStr;

     map.enableScrollWheelZoom();

     map.enableContinuousZoom();

     function doSearch(){

         if (!document.getElementById('city').value) {

             alert(lang.cityMsg);

             return;

         }

         var search = new BMap.LocalSearch(document.getElementById('city').value, {

             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) {

                         map.setViewport(points);

                     } else {

                         map.centerAndZoom(points[0], 13);

                     }

                     point = map.getCenter();

                     marker.setPosition(point);

                 } else {

                     alert(lang.errorMsg);

                 }

             }

         });

         search.search(document.getElementById('address').value || document.getElementById('city').value);

     }

     //获得参数

     function getPars(str,par){

         var reg = new RegExp(par+"=((\\d+|[.,])*)","g");

         return reg.exec(str)[1];

     }

     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{

             point = new BMap.Point(116.404, 39.915);    // 创建点坐标

             marker = new BMap.Marker(point);

             map.addControl(new BMap.NavigationControl());

             map.centerAndZoom(point, 10);                     // 初始化地图,设置中心点坐标和地图级别。

         }

         marker.enableDragging();

         map.addOverlay(marker);

     }

     init();

     document.getElementById('address').onkeydown = function (evt){

         evt = evt || event;

         if (evt.keyCode == 13) {

             doSearch();

         }

     };

     dialog.onok = function (){

         var center = map.getCenter();

         var zoom = map.getZoom();

         var size = map.getSize();

         var mapWidth = size.width;

         var mapHeight = size.height;

         var point = marker.getPosition();

         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=' + mapWidth,

                     '&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="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>');

         } else {

             var url = "https://api.map.baidu.com/staticimage?s=1&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 + '"' :'') + '/>');

         }

     };

     document.getElementById("address").focus();

 </script>

 </body>

 </html>

【转】百度UEditor控件中的map组件不支持https使用的问题解决的更多相关文章

如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。
原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...
arcgis api for flex 除去 esri map控件中的logo标志
在程序的applicationComplete方法中添加下列代码 private function reallyHideESRILogo(map : Map) : void { for(var i : ...
将展示内容（div、iframe）放在Expand控件中
Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...
在RichTextBox控件中添加超链接文本
实现效果: 知识运用: RichTextBox控件的AppendText方法 public void AppendText{string textData} //向控件中添加文本内容和Process ...
在MonthCalendar控件中选中日期
Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...
winform窗体（六）——DataGridView控件及通过此控件中实现增删改查
DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查一.后台数据绑定: List<xxx> list = new List<xxx> ...
Winform(DataGridView)控件及通过此控件中实现增删改查
DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查一.后台数据绑定: List<xxx> list = new List<xxx> ...
.net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
服务器控件中使用<%#...>, JS和html控件中使用<%=...>
//在服务器控件的属性中,需要用<%#...>来绑定其他控件的ID, 并且要在页面初始方法中,执行Page.DataBind(); <asp:ImageButton ID=" ...

随机推荐

第一次作业_ChenHong1998
我的目标学习到软件工程的实践过程回想一下你初入大学时对软件工程专业的畅想当初你是如何做出选择软件工程专业的决定的? 计算机是热门专业,软件工程专业好找工作你认为过去两年中接触到的课程是否符合你 ...
北大poj- 1008
Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 80956 Accepted: 24892 D ...
JavsScript学习---快速排序
<script type="text/javascript"> /** * “快速排序”的思想很简单,整个排序过程只需要三步: * (1)在数据集之中,找一个基准点 * ...
【转】反编译D-Link路由器固件程序并发现后门
固件是D-link无线路由器(型号:DIR-100 revA)的固件程序 v1.13.使用工具Binwalk,很快的就从中发现并提取出一个只读SquashFS文件系统,没用多大功夫我就将这个固件程序的 ...
【5】用vector进行直接插入排序
百分百自己编的程序,越来越觉得编程很好玩了. 但这算是第一次自己用vector这种不是那么无脑的方法编程,只能最多对3个数进行排序wwwww 今天我要回去搬宿舍了,等明天有时间,我一定要把bug找到! ...
Element-ui 更新tableData 中 row的某一个属性时，没有更新视图的问题
在一个报警音管理的页面中,每次点击试听的时候,需要把‘试听’ 更新为 ‘停止’, 起初我们给row.play=0时,显示为试听,row.play=1时显示为停止, 但是在代码中每次为row.play ...
git特殊命令
1.git追踪远程分支,该命令使用Tab不会自动补全 git branch --set-upstream-to=远程分支名(origin/xxx) 2.从远程分支创建本地新分支 git checkou ...
Linux运维工程师应具备哪些技能？
对于我们这些刚入门的运维小白来说,极强的好奇心总会驱使我们去涉猎各种技术,弄到最后很可能该学的知识半懵半解,知识体系混乱,学习毫无章法.因此,我们学习时要有一个明确的目标和知识体系(也是我学习的 ...
input 和 button元素作为提交、重置、按钮功用的区别。
首先,input元素和button元素都是可以作为普通按钮.提交按钮.重置按钮的. <input type="button" value="button" ...
Asp.Net Form表单控件的回车默认事件
当form表单文本框控件在收到回车事件时,默认会触发表单内第一个可提交按钮的事件,但业务中可能要求有其它控件进行提交,而不是这个默认的这时需要脚本控件事件冒泡传递取消回事事件. $(document ...

【转】百度UEditor控件中的map组件不支持https使用的问题解决

【转】百度UEditor控件中的map组件不支持https使用的问题解决的更多相关文章

随机推荐

热门专题