为你的博客添加Google地图(Use googlemap api)

作者:Wupei  |  发表时间:  |  所属分类:网站开发

早就听说能加Google地图了, 这次就试了一下, 效果还是不错的, 页面右边就是用本篇文章的方法做了
大家试试~本篇介绍 Goole API 的简单应用

设计思路:
一开始想就是一组javascripte应该,插入到博客的模板文件就可以了, 但是在服务器上测试以后,才知道,需要修改很多值, 尤其是HTML主要标签的属性也需要改, 这样的话,就很容易使本身的博客程序, 发生异常情况…
所以就应该换一种思路, 用<iframe>标签可以达到嵌入页面的效果, 也就是页面中再包含一个页面, 这样也可以避免google map key的失效, 也非常方便, 把响应的googlemap api放在一个html文件文件中就可以了


<IFRAME>标签代码 — 插入到您想显示的地方

HTML的相关说明:

1. <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
2. <style type=”text/css”>
   v:* {
    behavior:url(#default#VML);
   }
   </style>
说明: 两个是为了在IE下, 正常显示折线而添加的

3. <script src=”http://maps.google.com/maps?file=api&v=2&key=YourKey” type=”text/javascript”></script>
说明:这里的YourKey就是要放你上面申请的Key的值的地方

4. <body>标签的load()事件和GUnload()事件
说明: 前者是页面直接加载googlemap, 后者会消除大多数导致内存泄露的循环引用, 以避免您应用程序可能带来的内存泄露问题
5. <div id=”map” style=”width: 200px; height: 266px;border:5px solid black;”></div>
说明:这个div标签,是显示google地图的标签,可以设定宽度和高度,border是边框,我是为了适应我的模板加上的

官方文档:
Google地图API(官方中文)
Google地图API博客(官方英文)
关于IE下显示折线的官方解释

这里只是googlemap的简单的应用,高级应用未接触,仅供参考

Trackback from your site.

请在这里留言: