Google Map 是什么?这是Google公司(谷歌)推出的一项地图服务,我私下把它归为一种GIS服务。它不仅仅是一幅简单的电子地图图片,而是一种互动的、内涵丰富的GIS集成。当你打开http://maps.google.com/ 就能看到美利坚合众国的版图——Google公司是美国的,他们当然要首先展示自己的祖国。该页面上的地图标注全是英文。去年我还曾经很困惑,为何没有中文版?毕竟母语还是方便啊。前不久,看到一个大好消息,2007年2月9日,Google推出了中文版地图。

Google的地图不仅展示常规地图的外观,而且可以随时切换到“卫星地图”状态,查看真实的地貌。这一点得益于2004年他们富有远见地收购了Keyhole地图公司。在Google的地图上,用户可以搜索地名或者邮编,从而迅速定位。当然,你也可以用鼠标拖动地图,浏览一遍全球的山山水水,还可以查询从甲地至乙地的详细路线。为了方便其他网站在网页中插入互动的Google地图而不是jpg格式图片,Google推出了专用API接口。因此,插入到网页中的地图看上去是下面这个样子:

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

下载最新的Plugin GoogleMaps for Joomla 2.8 :
下载文件 (已下载 12 次)
这个文件只能在登入之后下载。请先 注册登入


不过,仅仅安装这个触发器是不够的。为了避免地图资源被滥用造成服务器瘫痪,Google规定网站要插入他们的地图,必须申请Google Maps API Key,并且仅限于顶级域名。也就是说,使用http://localhost/ 这样的本地测试服务器或者http://shop34073012.taobao.com这样的二级域名的用户无法享用这一服务。这个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=" 就行了。文字如果显示,将位于地图中的某个指定位置的“图钉”标记上方。通常情况下,这里的文字用于显示地址或者一个超级链接。 要在此处使用超级链接,请用如下格式: linkName. 千万不要使用双引号!
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='00.0000'|lon='00.0000'| zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'| overview='0'|text='jianing.name'|tooltip='jianing.name'|marker='1'| align='center'|key='googlekey'}


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

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

还有一个问题,那就是如何知道你要展示的位置的精确坐标?又一个办法就是从Google Map官方网站找到该位置然后复制其坐标。我建议你使用Google Earth软件,安装到电脑上以后,可以展示更丰富的地图信息,当鼠标指向地球上的任意位置时,该软件的状态栏就会自动显示该地的经度和纬度。再有就是直接在google里面搜某某地方的经纬度,知名地方的,都会显示,比如我上面的天安门广场,东经:116°23′17′′,北纬:39°54′27′′ ,就是lat='39.5427'|lon='116.2317'。

怎么样?利用Plugin GoogleMaps插入地图非常方便,Google Map现在不仅有了移动版Google Map Mobile,而且支持显示实时交通拥堵情况。相信以后通过API在网页中可以使用更多地图功能。在此白某也希望国内的编程高手能够以Google Maps为基础继续改进,为我们开发出更多新酷功能。请参考Google Maps API 说明



在bo-blog中插入代码

这需要使用到一个boblog的googlemaps插件:
下载最新的Plugin GoogleMaps for Joomla 2.8 :
下载文件 (已下载 6 次)
这个文件只能在登入之后下载。请先 注册登入


安裝完此插件后,我们来到后台的插件管理,在Googlemaps的管理项目里面,填入使用刚刚申请的Googlemaps key。

Googlemaps的使用方式
http://maps.google.com/ 上,搜到你要的地点
接著找到之后在地图右上角的 Link to this page,复制链接
接著插入一个 link 並指定 rel="googlemap" 具体如下:

<a href="Yourmaplink"  rel="googlemap">文字</a>


在后台有个设定,使用rel做判别,如果改成关闭后,请讲语法改成

<a href="Yourmaplink"  title="googlemap">文字</a>


如:天安门



本文joomla部分来自白大师07年的一篇文章,现在需要,就拿来修改了一下,希望好文章,继续辉煌!
原文链接:http://www.joomlagate.com/content/view/57/2/

相关日志 最新日志 随机日志 综合排行
  • 完美解决PHP中文乱...
  • 网站模板设计 Ext...
  • 四步教你在Jooml...
  • 爱google 爱c...
  • 放心都是正版!谷歌推...
  • Google也有了人...
  • Google的收购史...
  • Google 19大...
  • 余丹:为什么你的微信...
  • 浅谈两个关于硬盘的错...
  • k kb mb t ...
  • 韩宇斌:混IT,必须...
  • 还是要重推磁盘整理的...
  • 北京息壤 独立ip虚...
  • CuteFTP和fi...
  • 13个UI团队的博客
  • 第二代居民身份证 照...
  • 云服务器解决“Bad...
  • 我承认我吃醋
  • 暴风雨之夜——《翡翠...
  • 麦兜定律
  • What image...
  • cn地域域名不同后缀...
  • 2007年中国钢铁企...
  • 用好大家手上的Gro...
  • 动感也有家庭计划了 ...
  • 我想要个家 蜗牛的家
  • 严重推荐! [ 黑猫...
  • 卡巴斯基授权文件下载...
  • 淘宝代购|...
  • 如何使你的照片变成钱...
  • 北京大兴南各庄 首都...
  • 【原创】Vista ...
  • Office 200...
  • 解决Adobe CS...
  • CSS Layout...
  • 细看眼花缭乱的液晶显...
  • 四步教你在Jooml...
  • 文章来源: 本站原创 引用(0) 阅读(5411)
     
    对《利用Google API在Joomla和bo-blog中轻松插入Google Map地图 》有 1 条评论
    松迅 说:
    2011/01/16 09:48 Homepage
    【原创】2011给力地图插件,世界最简单的插入地图的方法
    在网站页面源码中插入如下代码,可以显示可指定的地图:
    <!--Sonxun begin 显示参数设置-->
    <span name="userwidth" id="userwidth" type="hidden" value="475" /><!--地图框宽度-->
    <span name="userheight" id="userheight" type="hidden" value="300" /><!--地图框高度-->
    <span name="userlat" id="userlat" type="hidden" value="39.906" /><!--目标纬度-->
    <span name="userlng" id="userlng" type="hidden" value="116.3976" /><!--目标经度-->
    <span name="userzoom" id="userzoom" type="hidden" value="15" /><!--放大倍率-->
    <span name="usertip" id="usertip" type="hidden" value="这是天安门广场" /><!--目标名称-->
    <script src="http://www.sonxun.com/sonxun.js" language="javascript"></script>
    <!--Sonxun end-->

    小试一下吧
    官方网址:www.sonxun.com
    跨域测试网址:www.toozhi.com/test.php
    懂点网页编程的朋友,很容易就可以修改span中的value值,这样就可以显示你想要的地图了
    分页: 1/1 第一页 1 最后页
    发表评论
    昵称

    网址

    电邮
    打开HTML 打开UBB 表情 打开表情 隐藏 记住我 [注册]