FCK编辑器谷歌地图插件

有朋友问我北京三日游这篇日志中的谷歌地图怎么做出来的,这是利用的FCK编辑器的谷歌地图插件。http://www.tetebaobei.cn/article.asp?id=52

之前发布FCK编辑器增强版时考虑到谷歌地图插件的适用性和安装方面的问题所以没有集成。现在既然有朋友需要,那么就另发一篇日志分享给大家。

FCK编辑器谷歌地图插件

首先请下载谷歌地图插件文件包,解压后整个目录上传到FCK编辑器目录下的editor\plugins目录下

然后,打开FCK编辑器目录下的fckconfig.js文件,找到如下一句代码

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;   

在其下一行插入一句代码如下

FCKConfig.Plugins.Add( 'googlemaps','zh-cn') ;   

然后找到FCK工具栏按钮设置代码,我这里以图片按钮为例

,'Image',   

在其后插入谷歌地图按钮代码

'googlemaps',   

然后在此文件的最后添加一句KEY代码如下

FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A';   

但是其中的KEY需要你去谷歌地图为自己的网站申请,并替换一下。KEY申请页面如下http://code.google.com/apis/maps/signup.html

到这一步就安装完毕了。

剩下的就是使用了,我专门为大家把这个谷歌地图插件做了一个中文语言文件,所以当大家需要使用此插件时,点击谷歌地图按钮,就会出现中文的插件界面,使用起来也很简单。

“地图”选项卡中,这里设置地图显示的大小、俯视缩放比例、地理经纬度

“搜索”选项卡中,可以通过搜索“地标”来快速对地图进制定位,比如输入“北京宫故”,点击搜索,那么地图会快速定位在北京故宫

“标签”选项卡中,可以在地图添加地标标签,并在标签中添加文字说明

“线标”选项卡中,通过双击添加线标点,构成线标路径

最后点击确认将设置好的地图插入日志中。OK
如需转载请注明原文出处:http://www.tetebaobei.cn/article.asp?id=56


[ 本帖最后由 huhaisen 于 2009-4-25 22:00 编辑 ]
附件:  你需要登录才可以下载或查看附件。没有帐号
FCK编辑器谷歌地图插件 首先请下载谷歌地图插件文件包,解压后整个目录上传到FCK编辑器目录下的editor\plugins目录下 然后,打开FCK编辑器目录下的fckconfig.js文件,找到如下一句代码 FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ;    在其下一行插入一句代码如下 FCKConfig.Plugins.Add( 'googlemaps','zh-cn') ;    然后找到FCK工具栏按钮设置代码,我这里以图片按钮为例 ,'Image',    在其后插入谷歌地图按钮代码 'googlemaps',    然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A';    但是其中的KEY需要你去谷歌地图为自己的网站申请,并替换一下。KEY申请页面如下http://code.google.com/apis/maps/signup.html 到这一步就安装完毕了。 剩下的就是使用了,我专门为大家把这个谷歌地图插件做了一个中文语言文件,所以当大家需要使用此插件时,点击谷歌地图按钮,就会出现中文的插件界面,使用起来也很简单。 “地图”选项卡中,这里设置地图显示的大小、俯视缩放比例、地理经纬度 “搜索”选项卡中,可以通过搜索“地标”来快速对地图进制定位,比如输入“北京宫故”,点击搜索,那么地图会快速定位在北京故宫 “标签”选项卡中,可以在地图添加地标标签,并在标签中添加文字说明 “线标”选项卡中,通过双击添加线标点,构成线标路径 最后点击确认将设置好的地图插入日志中。OK
资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值