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

最新推荐文章于 2024-09-03 22:00:00 发布

Chinamaggie

最新推荐文章于 2024-09-03 22:00:00 发布

阅读量645

点赞数

分类专栏： GIS 文章标签： javascript google xhtml html 浏览器 api

GIS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一段经过精简的代码：
<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 οnlοad="initialize()" οnunlοad="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>