Google Map开发系列(五)——怎样在你的网页里嵌入地图

要想在自己的网页中嵌入地图,常用的方法可以归纳为以下几种: 
1 
、最简单的方法 —— 使用谷歌地图主页的 " 链接 " 
      
如果你只需要在自己的页面上显示某个特定范围的地图,比如你的公司所在地,但是不需要在地图上添加任何额外的内容,比如标记、折线等等,那么,使用这个方法来嵌入谷歌地图是最简单的。 
      
登录 谷歌地图主页 ,定位你需要显示的范围后,点击地图左上角的  链接  ,会出现一个信息框,给出两个输入框,把第二个输入框中的内容拷贝到你的页面上就可以了。 
      
其实,这段嵌入代码就是一个 iframe 的声明,所以,虽然地图主页提供一个自定义地图并预览的功能,但是只能自定义地图的大小,如果需要的话,我们完全可以通过手动修改这个 iframe 声明来实现更多的自定义,比如,给这段 iframe 加上自定义的样式。 
2 
、最精简的方法 —— 使用谷歌静态地图 
      
如果你需要显示某个特定范围的地图,而且需要在地图上加上一些标记、折线。但是,你并不在乎你网页上的地图能否拖拽,那么,这个静态地图应该就是你需要的了。 
      
所谓静态地图,意思就是你在页面上嵌入的其实只是一个 GIF 图片,这个 GIF 图片是你通过 URL 从谷歌动态获取的,这样的嵌入地图就有别于我们常用的  动态  地图了,而且,加载这样的地图,比加载一个完整的地图要快捷的多。 
      
要在你的页面上使用这样的静态地图,只需要使用一个 img 标签,把这个标签的 src 属性指定为谷歌静态地图的 url 就可以了。 
      
看一个简单的静态地图 URL  http://ditu.google.cn/staticmap?center=39.915175,116.389332&zoom=14&size=500x300&key=YOUR_KEY_HERE
      
在这个 URL 中,你可以编辑 center  zoom  size 这些参数来指定地图的中心点、缩放级别、地图大小等等,当然,如果需要在地图上添加标记、折线,你还可以加上对应的参数。不过,不用担心你要记住这么多参数,这里有一个 定制静态地图的向导 ,简单的几步就可以得到你需要的 URL 了。如果有兴趣,可以去研究一下 谷歌静态地图的 API 文档  
      
严格来说,谷歌静态地图也是谷歌地图 API 的一种,所以,使用静态地图是需要你的谷歌地图 API 密钥的,如果你之前定义过地图 API 的密钥,直接 copy 过来就可以了,不需要再去注册。如果你不知道密钥是怎么回事,那就看看 我之前对密钥的解读吧。 
3 
、最自由的方法 -- 使用谷歌地图 API 
      
如果上面两种方式都不能满足你的需求,那么,就来试试 谷歌地图 API 吧。虽然谷歌地图 API 已经细分为 JavaScript  Flash  Earth  Static 等等多个版本,但是,在我看来, JavaScript API 是谷歌地图 API 的根本,所以,在我的博客里,除非特别指明,说到谷歌地图 API 都是指谷歌地图 JavaScript API 。使用这个 API ,你可以用你愿意的任何可行的表现形式在地图上展现你的数据,甚至可以把你自己的地图做的比谷歌地图还漂亮。 
      
要使用这个API 在页面中嵌入地图,简单的步骤就是:
      1
 )使用JavaScript 标签导入地图API 类库;
      2
 )在页面上定义一个装载地图的元素,通常使用一个div 标签,指定width height;
      3
 )在你的JavaScript 代码中new GMap2(document.getElementById("your map container's id"));
      4
 )使用GMarker GPolyline API 中提供的类定制你要在地图上添加的标记、折线等等。
      
详细的创建谷歌地图过程可以看看我的  使用 JavaScript 创建地图步骤详解  。但是,要想自如的使用这个 API ,你需要具备一定的 JavaScript 知识和动手能力,此外,强烈建议你先读读 谷歌地图 JavaScript API 的开发指南 ,能够解决你的一些常见疑问,当然了,你也可以在我的博客里找找你想了解的知识。

    除了上面说的这几种方法,其实还有一些比较少用的方法也可以在网页中嵌入地图,比如使用Google Gadget API ,我在博客右边栏嵌入的地图使用的就是Gadget API 

    如果你不需要在自己的页面中嵌入地图,或者,你没有自己的网站,那么,使用 Mapplet API 也是一个不错的创建你自己的地图的方式。这是一个可以在谷歌地图主页上  我的地图  中运行的小程序,它的 API 其实就是谷歌地图 API 的一个子集,因为要在谷歌地图主页中嵌入,所以与谷歌地图 API 稍稍有一些不同。详细情况可以参考一下 Mapplet API 的开发文档 

来源:http://blog.csdn.net/jiali765/archive/2010/03/02/5338453.aspx

加支付宝好友偷能量挖...


评论(0)网络
阅读(121)喜欢(0)Google Maps开发