Google Map开发系列（四）——使用JavaScript创建地图步骤详解

一段经过精简的代码： 
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>
<body>
    <div id="mapContainer" style="height:400px; width:400px;"></div>
</body>
<script type="text/javascript">
     var map = new GMap2(document.getElementById("mapContainer"));
     map.setCenter(new GLatLng(33.0, 106.0), 3);
</script>
新建一个空白的文本文件，把上面这段代码copy 过去，不要改变代码的任何顺序，然后把这个文本文件保存为html 文件，使用浏览器打开（不要使用MS 的IE ），看看你能看到什么！


对这段代码的详细解释 
上面的这段代码就是创建一个地图的核心步骤： 
1 、导入地图 API 类库。 
      <script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>
      注意这里的参数key ，我在以前的文章里已经详细解释过了，如果你只是在本地运行，暂时可以不用管它。
2 、在页面的 body 元素中定义一个地图容器。 
      <body>
        <div id="mapContainer" style="height:400px; width:400px;"></div>
      </body>
      这个地图容器一般使用div 元素来定义，如果你愿意，使用p 元素或者其他你能想到的元素都可以，但是都应该是块元素，并且必须定义它的id ，保证在后面的步骤里能够通过document.getElementById 找到这个元素。
      容器的 style 属性在这里是用来定义这个容器的大小，从而决定所显示地图的大小，当然，如果你在这里不定义也可以通过其他的手段来达到目的，这里暂且先认为这个 style 的定义和 id 属性一样也是必不可少的吧。 
      其实 body 元素在这里也有一些特殊的作用，就是保证下一步骤在页面的 html 元素全部加载结束后再执行，详细的理论就不细说了。 
3 、定义你自己的 script 区域，在里面 new 一个 GMap2 对象，并且指定其显示所需的两个基本要素：中心、缩放层次。 
      <script type="text/javascript">
         var map = new GMap2(document.getElementById("mapContainer"));
         map.setCenter(new GLatLng(33.0, 106.0), 3);
      </script>
     这里的GMap2 是谷歌地图API 中最重要的核心类，对应在页面上显示的地图，所有对地图的操作都需要在已经创建（new ）了GMap2 对象的基础上才能够进行。在调用GMap2 构造函数是使用的参数就是在上一步定义的地图容器，DOM 对象，使用document.getElementById 获取。
     要在页面上正常显示地图，仅仅调用 GMap2 类的构造函数创建一个 GMap2 对象还不够，你还需要指定这个 GMap2 对象的中心，通常也顺便指定它的缩放层次，否则就会默认显示缩放层次为 0 。 
     要指定新创建地图的中心，需要使用地图 API 里面定义的另一个常用类 GLatLng ，可以把这个类简单的认为是对地理坐标的封装类，构造函数中第一个参数是南北向的纬度，第二个参数是东西向的经度。 
     调用 GMap2 的 setCenter 方法设定完地图的中心和缩放层次，这个地图就可以正常显示了。 
     
还需要关心的几个问题： 
    上面的示例代码仅仅是为了显示一个试验性质的简单地图，所以把很多暂时不是很必要的代码都去掉了，如果你需要创建具有很好的兼容性、并且能够发布到你自己的网站上的地图，还需要注意这几个问题： 
    1 、为了保证有足够的兼容性，谷歌建议使用 XHTML 来定义显示地图的 html 页面，所以，你需要在这个页面的顶部声明 XHTML 的 DOCTYPE ，并且在 html 中声明 XHTML 的命名空间 
       <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      当然，最好你自己的页面代码也能够符合 XHTML 的语法规则。相对我们现在的 HTML4.01 来说，可以把 XHTML 语法规则简单的归纳如下： 
      html 、 head 、 title 、 body 元素一个都不能少，并且只能有 html 一个 root 元素； 
      不要使用简化的属性，必须使用 “name='value'” 的形式； 
      标签名和属性名都用小写字母，属性值要用引号括起来； 
      标签必须是闭合的，并且不能交叉嵌套； 
      使用 id 属性而不是 name 属性来获取元素；


    2 、为了兼容 “ 伟大的 ”IE 浏览器，以便能够在 IE 中也正确显示地图中的折线，需要在 html 标签中增加对 VML 命名空间的声明 
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
        这个很容易忽略，导致你在 IE 里的折线不能正常显示，所以把这一点单列出来加以强调。


    3 、对于通用的浏览器兼容性检查，地图 API 提供了一个全局方法 GBrowserIsCompatible() 来保证地图 API 是在它所兼容的浏览器里运行的，这个兼容浏览器列表我也没找到最新的，谷歌文档里给出了一个远古时代的列表，所以不列也罢，对我们目前通用的 FireFox 、 IE 、 Safari 、 Opera 浏览器里运行地图 API 都没有问题。 
      这里只说一下GBrowserIsCompatible() 这个方法的使用：
      从名字也可以看出，GBrowserIsCompatible() 方法返回一个boolean 类型的值，所以，把我们对地图操作的起点放在对这个方法返回值的判断块中，形如：
      if(GBrowserIsCompatible()){
        // 开始创建和操作地图
      } else {
        // 如果有必要，就在这里定义你对这个异常的处理
      }
      当然，在你自己的代码中，针对不同的浏览器环境你还是需要自己实现兼容性的代码，这里的GBrowserIsCompatible() 只是保证地图API 类库是在它兼容的环境中运行的。
    4 、注册你要发布页面所在网站的谷歌地图 API 密钥，替换掉示例代码里的 key ，我 在这里详细解释过这个密钥 ，不多说了。 
    5 、为了保证你的页面在任何可用的网络环境下都能快速加载并且正确显示，建议定义 body 元素的 onload 方法，在 onload 方法中开始你的 JS 动作。同时，把读入地图 API 的 script 标签放在 head 元素中，而把你自己的 JavaScript 代码块放到 body 标签的后面去定义。如果对浏览器的加载顺序比较熟悉的话，你就不必遵守我说的规则了，自由定义你认为应该的 JavaScript 声明顺序。 
    6 、为了避免 JavaScript 中引用页面的 DOM 元素可能存在的内存泄漏 ( 尤其是在 “ 伟大的 ”IE 浏览器中 ) ，你需要使用地图 API 中定义的 GUnload() 方法作为你的 body 元素的 onunload 方法，并且最好把这个作为一个必须的规则记住。但是 GUnload() 方法不是避免内存泄漏的大力丸，所以，你在自己的代码中还是需要注意避免内存泄漏这个问题。 
    7 、为了能够在页面上正常显示中文，需要把页面的字符集定义为 utf-8 。


    所以，一个完整的应用谷歌地图API 的页面代码如下：
    <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <title> 我的谷歌地图</title>
         <script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=YOU_API_KEY" type="text/javascript"></script>
      </head>
      <body onload="initialize()" onunload="GUnload()">
        <div id="mapContainer" style="height:400px; width:400px;"></div>
      </body>
      <script type="text/javascript">
        function initialize() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("mapContainer"));
            map.setCenter(new GLatLng(33.0, 106.0), 3);
          }
        }
      </script>
    </html>

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

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


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