Joomla/在网页中插入Google Map地图

来自站长百科
跳转至: 导航、​ 搜索

Joomla | Joomla使用手册

概述[ ]

Google的地图不仅展示常规地图的外观,而且可以随时切换到“卫星地图”状态,查看真实的地貌。这一点得益于2004年他们富有远见地收购了 Keyhole地图公司。在Google的地图上,用户可以搜索地名或者邮编,从而迅速定位。当然,你也可以用鼠标拖动地图,浏览一遍全球的山山水水,还可以查询从甲地至乙地的详细路线。

为了方便其他网站网页中插入互动的Google地图而不是jpg格式图片,Google推出了专用API接口。

Plugin GoogleMaps for Joomla[ ]

Google地图是怎么插入到网页中去的呢?这就要说到一个Joomla的小插件,也叫触发器——Plugin GoogleMaps for Joomla。该触发器只有10Kb大小,安装并发布之后,就能遵照它的语法通过一句代码插入地球上任意一处的Google地图到网页中。

不过,仅仅安装这个触发器是不够的。为了避免地图资源被滥用造成服务器瘫痪,Google规定网站要插入他们的地图,必须申请Google Maps API Key,并且仅限于顶级域名。也就是说,使用http://localhost/ 这样的本地测试服务器或者 http://www.joomlagate.com/~user8868 这样的二级域名的用户无法享用这一服务。这个Key当然也是免费的,申请的网址是:http://www.google.com/apis/maps/signup.html 。

注意:在申请这个Key的时候,还要求你同时拥有一个Google帐户,也就是一个@gmail.com 或者 @google.com 的信箱。Gmail信箱也是免费注册的.

拿到了Google Maps API Key,安装了Plugin GoogleMaps for Joomla触发器,我们就可以动手了。

参数设置[ ]

首先在网站后台点击此触发器的名称进入其参数设置页面。在这里,设置一些参数的默认值。你可以修改下列参数中的任何一个,当然你也可以什么都不填,在插入代码时还可以直接附带参数:

1. width(宽度), height(高度):设置一个你想要的数值,不过如果太小地图展示的画面就太少了。你必须在数字后面紧接着填写其单位,例如 100% 或 400px

2. lon(经度), lat(纬度):可以通过搜索来确定这个坐标值(搜索时可能需要包括街道,门牌号,邮编,城市名称以及国家名称)

3. zoom(缩放):可以选择 Google Maps API 中规定的任何选项.

4. zoomType(缩放类型):可选 Small 或者 Large, 这个选项控制地图上展示的缩放工具类型,或者选择 None 则不显示缩放工具。

5. zoomNew:设为 1 表示在地图上双击鼠标后连续放大,设为 0 则表示在地图中央每点击一次鼠标,只放大一次。(默认为 0)

6. mapType(地图类型):可以选 Normal (正常地图,默认值), Satellite(卫星地图) 或 Hybrid(混合地图).

7. showMaptype(显示地图类型):设为 0 表示地图上不显示地图类型选择按钮,设为 1 则会在地图上显示地图类型的选择按钮(默认是 1)

8. Overview(概览):设为 0 表示在地图右下角没有概览窗,设为 1 表示那个位置有概览窗,设为 2 表示概览功能启用,但是初始化时处于隐藏状态。(默认是 0)

9. text(文字):这个文字用作地标。文字将以气球的样式显示在地图上.如果你不想让文字出现,只需设置为 text=" 就行了。文字如果显示,将位于地图中的某个指定位置的“图钉”标记上方。通常情况下,这里的文字用于显示地址或者一个超级链接。 要在此处使用超级链接,请用如下格式: <a href=linkAddress target=linkTarget title=linkTitle>linkName</a>. 千万不要使用双引号!

10. marker(地标):表示在展示地图时打开信息窗 (1,默认)还是关闭信息窗(0)。

11. tooltip(提示):表示当鼠标指向地标时,可以显示一个气泡样的提示信息(不要使用 HTML)

12. address(地址):此处填写的地址用于搜索某个坐标(经度/纬度 为空时)

13. align(对齐方式):地图在网页中放置的位置,三个选项 left(左对齐), right(右对齐)或者 center(居中)

14. key:表示Google Map API Key (可选). 你可以在后台设定,也可以在网页中插入触发器代码时再填写这个key。如果你还没有 Google Maps Key,那么点击这里注册一个.

在网页中插入代码[ ]

在Joomla网页上,你可以在任何位置——不管是简介文字还是正文部分——利用带有参数的{mosmap}标记来插入一幅Google地图。语法(为了防止自动转换成地图,我把代码两端的大括号改变了一下,复制后请修改):

{mosmap width='500'|height='400'|lat='52.0523'|lon='4.4471'| zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'| overview='0'
|text='sv DWO'|tooltip='DWO'|marker='1'| align='center'|key='googlekey'}

这段代码中的各个参数其含义已经在上面解释过,相邻两个参数之间用竖线隔开。如果不附带任何参数,那么单单一个{mosmap}标记只能显示后台默认参数所确定的地图。也就是说,插入的地图都是一样的。为了针对不同地点插入不同地区的地图,就必须至少附带一个经度、一个纬度两个参数来确定一个位置。

插入之后检查一下该页面的 html 代码,以确认在{和 }之间没有
或含有一个回车符. 触发器命令必须在同一行!在同一个页面中,可以用一次,两次,或者多次来显示源于多个地点的多个地图。

还有一个问题,那就是如何知道你要展示的位置的精确坐标?又一个办法就是从Google Map官方网站找到该位置然后复制其坐标。建议你使用Google Earth软件,安装到电脑上以后,可以展示更丰富的地图信息,当鼠标指向地球上的任意位置时,该软件的状态栏就会自动显示该地的经度和纬度。

参考来源[ ]

http://www.joomlagate.com/article/joomla10-tutorial/how-to-insert-google-maps-in-joomla-content/

Joomla 1.0使用手册导航

Joomla安装

Joomla!的安装

Joomla 1.0教程

让网站自动适应掌上电脑阅读版面 | MosIf的使用 | Joomla登录模块的DIY改造| 用下拉式页面跳转替换Joomla跳转列表 | configuration.php文件操作 | 用blog形式做简单的产品展示 | 将DreamHost的mysql数据导入及导出的问题 | 给页面顶端添加ActiveX Infobar | 用JA Transmenu模块做多级弹出菜单 | 用桥接器整合开源Gallery2图库到Joomla | 用CB Profile Gallery搭建交友网站的会员相册 | 在网页中插入Google Map地图 | VM中产品详情只显示大图的实现 | Joomla!扩展(组件、模块、触发器)的汉化 | Joomla! Pack的使用 | 应用JSMF桥接器在Joomla!上安装SMF论坛 | Advanced Flash Mp3 Player播放器模块用法 | Joomla/Allvideos Plugin 引用视频、音频的方法|geshibot使用详解 | 表格式模板列宽度自动扩展的实现 | Joomla! Tkit使用详解 | Community Builder 1.0.2 的安装方法 | 利用CSS给文章标题添加图片 | 如何选择合适的下载组件 | 让Joomla支持flash格式的banner

其他Joomla教程

用XAMPP快速搭建Joomla本地测试服务器 | 用Gmail的SMTP发送Joomla激活及通知邮件 | 深入认识Joomla CMS:扩展、菜单及模板 | Joomla 1.5教程 | Joomla高级教程 | Joomla! SEO教程