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
加支付宝好友偷能量挖...