原文地址：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. Linux系统调用列表(转)

    以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的Linux系统调用列表,即使是简单的字母序英文列表,能做到这么完 ...

  2. MVP 实践

    今天有时间看了看google的官方文档,下载todo源码,仔细研读了一下,觉得其思想对开发还是有很大帮助的.个人认为,MVP通过Activity与业务逻辑的解耦,其作为Controller的职责更加单 ...

  3. Linux：Debian系统的安装

    这期就安装与Ubantu.Linux Mint差不多的系统,但是这个Debian系统的话,它安装时却有些不一样,什么不一样,我们接下来看看吧! 安装Debian系统 系统下载 Debian 9.5下载 ...

  4. Python第四章（北理国家精品课 嵩天等）

    一.程序的分支结构 二.身体质量指数BMI #CalBIv1.py height,weight = eval((input("请输入身高(米)和体重\(公斤)[逗号隔开]:"))) ...

  5. c++学习过程

    作者本人也是一名初学者,我的QQ:2522929921,可以一起交流啊! 希望广大初学者能够一起进步: 1.掌握编程思维真的很重要!!!!***. 2.不能刻意记忆语法规则. 3.在循序渐进的项目实战 ...

  6. VMSTAT监控CPU使用率，内存使用，虚拟内存交换情况

    Linux性能监控分析命令(一)—vmstat命令详解 一.vmstat介绍 语法格式: vmstat [-V] [-n] [-S unit] [delay [count]] -V prints ve ...

  7. 深入理解Python字符编码

    不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久,你一定遇到过UnicodeEncodeError.UnicodeDecodeError 错误,每当遇到错误我们就拿着 enc ...

  8. Lua实现Map

    通过Lua中自带的table来实现一个Map,可以根据键值来插入移除取值 map = {} local this = map function this:new() o = {} setmetatab ...

  9. s21day23 python笔记

    s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...

  10. Egret_时间与运行

    1.加载资源 2.将显示对象添加到显示列表 /////////////*****************************动态帧频******************************** ...