https://www.cnblogs.com/fireicesion/p/10777033.html
原文地址：https://blog.csdn.net/stacy06/article/details/82626363
最近項(xiàng)目部署到了https環(huán)境下，使用的UEditor富文本編輯器中的map組件出現(xiàn)了問題，控制臺報(bào)了一堆錯誤，主要是mixed content.. ，就連百度的官網(wǎng)上也同樣是有這些問題，汗。。
沒有辦法，只能四處搜索解決問題的答案。。。
第一點(diǎn)收獲：
https是安全傳輸協(xié)議，在這個協(xié)議下傳輸?shù)木W(wǎng)頁不允許包含http協(xié)議這類不安全的內(nèi)容。
HTTPS頁面里動態(tài)的引入HTTP資源，比如引入一個js文件，會被瀏覽器直接block掉的.在HTTPS頁面里通過AJAX的方式請求HTTP資源，也會被直接block掉的。也就是報(bào)mixed content，
解決方法：頁面的head中加入以下代碼
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">（可以不加）
意思是自動將http的不安全請求升級為https
第二點(diǎn)收獲：
上面設(shè)置完成之后頁面上的內(nèi)容被自動從http協(xié)議改成了https協(xié)議，但是百度地圖的應(yīng)用還是有問題，百度地圖的瓦片加載不出來，發(fā)現(xiàn)這些瓦片被自動改成https之后是不存在的。。也就是說這些地圖瓦片是只部署在http下的，這可怎么辦，難道百度地圖不支持https嗎。。這不應(yīng)該啊
又一通查找搜索之后。。。。找到百度地圖切換https協(xié)議的方案：
將地圖的js引用稍加修改，http-->https，后面參數(shù)加上&s=1，如此就支持https了
第三點(diǎn)：
但是還是沒有完全解決，最后查看我用的Ueditor中用的百度地圖的版本太低了。。v=1.1的，改成2.0的試試吧，https的相關(guān)問題終于沒有了，但是有一些百度地圖的api沒有了。。。
應(yīng)該是2.0相比于1.1的api還是有些變化的吧，再查看百度地圖的官方文檔，把功能類似的api修改了一下，呼呼。。最后問題終于解決了。
主要修改map.html中的內(nèi)容羅如下：
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引用方式
最后，大功告成啦
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);
}
//獲得參數(shù)
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); // 創(chuàng)建點(diǎn)坐標(biāo)
marker = new BMap.Marker(point);
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(point, 10); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。
}
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¢er=" + 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>
聯(lián)系客服
