想在网页中插入动态地图不难,直接打开网址http://api.map.baidu.com/lbsapi/creatmap/,然后按照提示操作,最终生成脚本,放到html文件中即可。而在kindeditor中插入动态地图就更简单了,最新版的kindeditor已经添加了插入动态地图的功能。

这里我要说的是,如果一个cms中整合的是老版本的kindeditor,没有插入动态地图这个功能,或者kindeditor生成的地图尺寸太小,又不能更改,那么我们要怎么办呢?

偶然间我想到一个方法,我们可以先按照文章开头的方法生成脚本代码,然后在kindeditor中点击【插入程序代码】按钮,选择javascript,将百度生成的代码粘贴到弹出的窗口中,保存后,刷新前台,就可以看到百度的动态地图生成了。

当然,生成的动态地图的css样式可能跟我们需要的不一致,那就要去修改百度生成的脚本中的一些css样式了。

还有,就是我们想在动态地图的下方放置联系方式等文本,可是在kindeditor中输入文本后,再次刷新前台,我们会发现已经生成的地图页面全都乱掉了,我觉得这应该是给文本内容或者文本样式和地图脚本冲突造成的,为什么冲突?我也不知道。

摸索了一下,解决起来也不麻烦,我发现当我插入地址脚本后,如果编辑框中是这个样子,那么当我在下方输入本文后,前台页面一准乱掉。

而如果插入地图脚本后,显示成下面这样,在脚本后输入文本就没问题。

如果我们直接点击【插入程序代码】按钮,然后插入代码后总是图一的样子,那么我们可以试试点击【全屏显示】,然后在插入代码,这样应该就可以了。

最终效果:

在cms以及kindeditor中插入百度动态地图的方法的更多相关文章

  1. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  2. 安卓---项目中插入百度地图sdk

    百度地图 应用里面 自带地图 搜房网 下载百度地图的sdk 熟悉api 注冊百度开发人员的账号 2.12 仅仅要有一个ak就能够 高版本号须要提供应用程序的包名和签名返回开发人员的序列号 使用百度地图 ...

  3. 页面中插入百度地图(使用百度地图API)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF5dW4wNTE2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  4. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  5. MySQL 命令行工具不能向表中插入中文的解决方法

    1.报错图示 解释:sname这个字段 解析出错. 2.解决方法 打开MySQL的安装目录,找到my.ini文件,把57和81行的utf8改成gbk后 保存,最后,重启MySQL的服务 即可. 3.测 ...

  6. Android向系统相册中插入图片,相册中会出现两张 一样的图片(只是图片大小不一致)

    向系统相册中插入图片调用此方法时,相册中会出现两张一样的图片 MediaStore.Images.Media.insertImage 一张图片是原图一张图片是缩略图.表现形式为:android4.4. ...

  7. 如何在excel单元格中插入图片批注

    在excel单元格中插入图片批注的方法: 1.选定要插入图片的单元格,然后右键选择插入批注. 2.然后会插入一个批注框,为了不影响图片效果,可以将批注文字都删除.然后鼠标移动到批注框边角再右键. 3. ...

  8. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  9. html中script标签的使用方法

    向HTML页面中插入JavaScript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator2中首先实现.后来,这个元素被加入到 ...

随机推荐

  1. linux手动安装配置 mysql5.7

    本文原出处地址  https://www.cnblogs.com/mujingyu/p/7689116.html 一.安装前的检查 1.1 检查 linux 系统版本 [root@localhost ...

  2. C#实现远程开机(局域网测试通过)

    首先介绍相关知识. UDP协议 UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interconnection,开放式系统互联 ...

  3. Dev Envirenment - VS Code && C++ && MinGW

    1. 安装编译器 安装 MinGW-W64 添加系统环境变量 注意: 1)安装 MinGW 的时候要选择正确的 CPU 处理器类型 2)添加系统变量后需要重启电脑系统 2. 安装本文编辑器 安装 VS ...

  4. Java开发环境的搭建-JDK的安装

    一.下载 JDK是个免费的东东,所以不要去百度啥破解版了,直接去官网下载最新版本吧,比较安全, 下载地址 如下图所示 - 点击上图中的圈中部分,之后会下图的部分. 根据你的电脑系统是64位,还是32位 ...

  5. 「ZOJ 1354」Extended Lights Out「高斯消元」

    题意:给定一个\(5\times 6\)的棋盘的\(01\)状态,每次操作可以使它自己和周围四个格子状态取反,求如何操作,输出一个\(01\)矩阵 题解:这题可以通过枚举第一行的状态然后剩下递推来做, ...

  6. Percona Toolkit安装、使用

    percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: l  检查master和slave数据的一致性 l  有效地对记 ...

  7. Leetcode 746. Min Cost Climbing Stairs 最小成本爬楼梯 (动态规划)

    题目翻译 有一个楼梯,第i阶用cost[i](非负)表示成本.现在你需要支付这些成本,可以一次走两阶也可以走一阶. 问从地面或者第一阶出发,怎么走成本最小. 测试样例 Input: cost = [1 ...

  8. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Luogu P2107 小Z的AK计划 堆贪心

    好久不做这种题了... 存一下每个点的位置和时间,由于达到某个位置跟之前去哪里AK的无关,所以在时间超限后,可以用大根堆弹掉之前消耗时间最大的,来更新答案,相当于去掉之前花费最大的,直到时间不在超限. ...

  10. IntelliJ Save Action

    https://blog.csdn.net/hustzw07/article/details/82824713