在cms以及kindeditor中插入百度动态地图的方法
想在网页中插入动态地图不难,直接打开网址http://api.map.baidu.com/lbsapi/creatmap/,然后按照提示操作,最终生成脚本,放到html文件中即可。而在kindeditor中插入动态地图就更简单了,最新版的kindeditor已经添加了插入动态地图的功能。
这里我要说的是,如果一个cms中整合的是老版本的kindeditor,没有插入动态地图这个功能,或者kindeditor生成的地图尺寸太小,又不能更改,那么我们要怎么办呢?
偶然间我想到一个方法,我们可以先按照文章开头的方法生成脚本代码,然后在kindeditor中点击【插入程序代码】按钮,选择javascript,将百度生成的代码粘贴到弹出的窗口中,保存后,刷新前台,就可以看到百度的动态地图生成了。
当然,生成的动态地图的css样式可能跟我们需要的不一致,那就要去修改百度生成的脚本中的一些css样式了。
还有,就是我们想在动态地图的下方放置联系方式等文本,可是在kindeditor中输入文本后,再次刷新前台,我们会发现已经生成的地图页面全都乱掉了,我觉得这应该是给文本内容或者文本样式和地图脚本冲突造成的,为什么冲突?我也不知道。
摸索了一下,解决起来也不麻烦,我发现当我插入地址脚本后,如果编辑框中是这个样子,那么当我在下方输入本文后,前台页面一准乱掉。
而如果插入地图脚本后,显示成下面这样,在脚本后输入文本就没问题。
如果我们直接点击【插入程序代码】按钮,然后插入代码后总是图一的样子,那么我们可以试试点击【全屏显示】,然后在插入代码,这样应该就可以了。
最终效果:
在cms以及kindeditor中插入百度动态地图的方法的更多相关文章
- 如何在HTMl网页中插入百度地图
方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...
- 安卓---项目中插入百度地图sdk
百度地图 应用里面 自带地图 搜房网 下载百度地图的sdk 熟悉api 注冊百度开发人员的账号 2.12 仅仅要有一个ak就能够 高版本号须要提供应用程序的包名和签名返回开发人员的序列号 使用百度地图 ...
- 页面中插入百度地图(使用百度地图API)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF5dW4wNTE2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- vue项目中使用百度地图的方法
1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http: ...
- MySQL 命令行工具不能向表中插入中文的解决方法
1.报错图示 解释:sname这个字段 解析出错. 2.解决方法 打开MySQL的安装目录,找到my.ini文件,把57和81行的utf8改成gbk后 保存,最后,重启MySQL的服务 即可. 3.测 ...
- Android向系统相册中插入图片,相册中会出现两张 一样的图片(只是图片大小不一致)
向系统相册中插入图片调用此方法时,相册中会出现两张一样的图片 MediaStore.Images.Media.insertImage 一张图片是原图一张图片是缩略图.表现形式为:android4.4. ...
- 如何在excel单元格中插入图片批注
在excel单元格中插入图片批注的方法: 1.选定要插入图片的单元格,然后右键选择插入批注. 2.然后会插入一个批注框,为了不影响图片效果,可以将批注文字都删除.然后鼠标移动到批注框边角再右键. 3. ...
- html页面中插入html的标签,JS控制标签属性
html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...
- html中script标签的使用方法
向HTML页面中插入JavaScript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator2中首先实现.后来,这个元素被加入到 ...
随机推荐
- gRPC官方文档(概览)
文章来自gRPC 官方文档中文版 概览 开始 欢迎进入 gRPC 的开发文档,gRPC 一开始由 google 开发,是一款语言中立.平台中立.开源的远程过程调用(RPC)系统. 本文档通过快速概述和 ...
- [LeetCode] 92. Reverse Linked List II_Medium tag: Linked List
Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...
- weekly contest 115
958. Check Completeness of a Binary Tree Given a binary tree, determine if it is a complete binary t ...
- 算法训练 Pollution Solution(计算几何)
问题描述 作为水污染管理部门的一名雇员,你需要监控那些被有意无意倒入河流.湖泊和海洋的污染物.你的其中一项工作就是估计污染物对不同的水生态系统(珊瑚礁.产卵地等等)造成的影响. 你计算所使用的模型已经 ...
- hpp文件简介
Boost库文件采用的.hpp的后缀,而不是分成两个文件,也就是”.h+.cpp”,之所以这样做是有理由的,首先就是与普通的C/C++头文件区分,另外一个原因就是使Boost库不需要预先编译,直接引用 ...
- anularjs前端分页
var dataList = []; $scope.page = { page:1, pageSize:15, numPerPageOpt:[15,30,50,100], totalNum:0, to ...
- P2173 [ZJOI2012]网络
\(\color{#0066ff}{ 题目描述 }\) 有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同 ...
- [USACO10OCT]湖计数Lake Counting 联通块
题目描述 Due to recent rains, water has pooled in various places in Farmer John's field, which is repres ...
- [TJOI2013]循环格 费用流 BZOJ3171
题目背景 一个循环格就是一个矩阵,其中所有元素为箭头,指向相邻四个格子.每个元素有一个坐标(行,列),其中左上角元素坐标为(0,0).给定一个起始位(r,c),你可以沿着箭头方向在格子间行走.即:如果 ...
- appium键盘处理
最近对appium感兴趣,就从网上找了些资料,搭建了环境,下载了appium测试代码和测试apk,这方面的东西晚上再写 appium最新版(v1.4.0.0)已经没有sendKeyEvent了,所以现 ...