原文地址：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中加入以下代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">（可以不加）

意思是自动将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中加入以下代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

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

修改前：

<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=your_ak&s=1"></script>

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使用的问题解决的更多相关文章

  1. 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。

    原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...

  2. arcgis api for flex 除去 esri map控件中的logo标志

    在程序的applicationComplete方法中添加下列代码 private function reallyHideESRILogo(map : Map) : void { for(var i : ...

  3. 将展示内容（div、iframe）放在Expand控件中

    Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...

  4. 在RichTextBox控件中添加超链接文本

    实现效果: 知识运用: RichTextBox控件的AppendText方法 public void AppendText{string textData} //向控件中添加文本内容 和Process ...

  5. 在MonthCalendar控件中选中日期

    Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...

  6. winform窗体（六）——DataGridView控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  7. Winform(DataGridView)控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  8. .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  9. 服务器控件中使用<%#...>, JS和html控件中使用<%=...>

    //在服务器控件的属性中,需要用<%#...>来绑定其他控件的ID, 并且要在页面初始方法中,执行Page.DataBind(); <asp:ImageButton ID=" ...

随机推荐

  1. 小白的Redis学习（一）-SDS简单动态字符串

    本文为读<Redis设计与实现>的记录.该书以Redis2.9讲解Redis相关内容.请注意版本差异. Redis使用C语言实现,他对C语言中的char类型数据进行封装,构建了一种简单动态 ...

  2. 日积月累---JVM01

    Java体系结构包括四个独立但相关的技术: Java程序设计语言 Java class文件格式 Java应用编程接口 Java虚拟机 用Java编程语言编写源代码,把它编译成Java class文件, ...

  3. MySQL5.7关于密码二三事

    MySQL5.7关于密码二三事 第一个:update user set password=password('root') where user='root' and host='localhost' ...

  4. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  5. Openflow协议详解

    http://www.h3c.com/cn/d_201811/1131080_30005_0.htm# 1 OpenFlow背景 转发和控制分离是SDN网络的本质特点之一 .在SDN网络架构中,控制平 ...

  6. JAVA字符串的常见处理和操作

    1.纯数字字符串补0为指定位,格式化输出(例如00482这样) 使用String.format处理: int mNumber = 1; // 0 代表前面补充0 // 4 代表长度为4 // d 代表 ...

  7. java基础——字符串中的反转Reverse问题（面试必备）

    由于研究了关于字符串(String)的问题,今年就在这里总结一下,首先说一下有关于面试,我想的是,需要一定的技能,比方说,大家想到这个反转问题,肯定能说上了,只不过是你说的一般人都知道,要想在面试中更 ...

  8. 输入一个正整数n，计算出[0,n]这些整数中的二进制数没有连续3个1的数字有多少

    输入一个正整数n,计算出[0,n]这些整数中的二进制数没有连续3个1的数字有多少? 例子:输入数字9,则输出结果位9.因为[0-9]中,只有数字7有连续的三个‘1’出现,别的都没有,所以一共有9个数字 ...

  9. 阿里云ecs使用补充说明

    前置文章:http://www.cnblogs.com/newbob/articles/5400495.html 阿里云ecs使用心得的一些个人补充部分 一.在yum安装node/npm的过程中出现的 ...

  10. Learning Structured Representation for Text Classification via Reinforcement Learning 学习笔记

    Representation learning : 表征学习,端到端的学习 pre-specified  预先指定的 demonstrate  论证;证明,证实;显示,展示;演示,说明 attempt ...