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

ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议相关推荐

百度UEditor富文本编辑器去除自动追加span标签
#消息模板实时翻译 1.消息模板支持实时翻译,并且将消息模板中的主题.消息.短信.邮件修改为消息富文本编辑器,对主题和短信的富文本编辑器工具进行隐藏. 2.替换规则: 同步拼接编码和label, ...
phpeditor编写php_PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下下载UEditor 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为 ...
java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片依赖库版本: spring boot ...
php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
Ueditor 富文本编辑器插入 m3u8 和 mp4 视频（PHP）
当前环境:PHP.Ueditor的版本是1.4.3 新的需求是,需要在Ueditor 富文本编辑器中,插入视频播放,并且视频格式有MP4,也有M3U8. 百度编辑器默认的是embed,需要修改下配置. ...
Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
Ueditor富文本编辑器使用本地表情包
Ueditor富文本编辑器使用本地表情包可以去百度编辑器下载表情包http://ueditor.baidu.com/website/download.html 也可以自己去搞一套 images目录下 ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...

ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议相关推荐

最新文章

热门文章