ueditor富文本編輯器使用百度地圖自定義動態地圖組件及兼容https及http協議

ueditor富文本編輯器默認支持百度地圖組件，但是如果導入動態地圖后會加很多默認的地圖組件在上面。如果需要自定義動態地圖的組件則需要修改ueditor特定的html。

ueditor百度地圖組件所在目錄

 

show.html文件中定義了地圖的控件，有自定義需要的時候可以在這個文件中自己編輯

 

如果自己所在的環境中是https協議的話，那ueditor是不支持的，因為這兩個文件中使用的是http協議的接口。所以為了滿足http跟https協議的話最好將這兩個文件下的map接口給為https下的接口，因為https協議下默認是不能請求http下的資源的。瀏覽器會自動BLOCK掉。

修改如下：

map.html中

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

修改后

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

修改前

// var zoom = map.zoomLevel;

// var point = marker.getPoint();

// var 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;

修改后

var point = marker.getPosition();

var zoom = map.getZoom();

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;

　　show.html中

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

修改后
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度KEY&s=1"></script>

　　一句話概括就是把引入的http下的百度地圖js修改為https下的。由於https下的百度地圖組件與http下的使用方法不一樣所以對應的使用代碼也做相應的修改。至於網上找到有些大神說要在html文件加上來自動講http的不安全請求升級為https

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

　　個人測試發現可能加上會報如下錯誤，所以個人使用的時候未加這段代碼。可能是因為本人測試的時候沒有處於https環境下導致，所以如果為了使百度地圖的修改適用於http及https都能使用所以沒有加入上面的meta