從小到大不論是去買東西、走在路上，常會聽到別人叫\"帥哥\"進來看看，或是帥哥\"來試吃看看"，讓我不知不覺認為我自己真的是個"帥哥\"，因為大家都這樣叫我~~

Google Maps API 中文開發手册 - 導言

上一篇 / 下一篇 2007-08-23 12:07:14 / 個人分類：程式技術文件

Google Maps的"Hello World"

看简单的例子是开始学习API的最有效的方法，这个网页在层上居中显示了一个300x300的地图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap(document.getElementById("map"));
      map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    }

    //]]>
    </script>
  </body>

</html>

你可以点这儿预览这个例子的效果，不过在你上传到自己的网站上运行之前，你必须把其中的"&key="之后的授权码换成自己在Maps API key申请的授权码，否则看不到效果.本网站使用的范例中的授权码只能在Step1.cn域名上使用。

你可以看到，Google Maps使用了一个JavaScript文件(http://maps.google.com/maps?file=api&v=1) 这个文件包含了你在自己的网页上显示Google地图的所有的函数和类. 想要在自己的网页上使用Google Maps API，你必须在网页上通过script标签连接一个包含你申请的授权码的URL:

<script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>

Google Maps API提供的最重要的类是GMap,它代表页面上的地图对象，你可以根据需要在页面上使用多个GMap的实例每个地图被包含在一个HTML的容器(container)里面，比如DIV标签.

下面会讲到如何给地图实例添加和操作标注.

Google Maps并不是对每一个浏览器都兼容的， Google Maps 现在兼容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera，不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的，所以Maps API提供了一个全局的方法(GBrowserIsCompatible())来检查浏览器兼容性，但是并不自动检查. 引入的脚本http://maps.google.com/maps?file=api&v=1可以在几乎所有的浏览器中被正常解析，所以你可以放心的在检查浏览器兼容性之前引入该脚本.

在本文的所有例子之中，除了上面的一篇之外，其他的既没有用GBrowserIsCompatible()检查浏览器兼容性，也没有给出任何错误信息正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查.

XHTML和VML

建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在DOCTYPE标签时，浏览器会使用\"标准兼容模式"来处理页面，这将使页面能更好的跨越浏览器执行.

同样，如果你需要在地图上包含折线，你需要为IE浏览器在页面上引入VML命名空间这样，你的文档开头就应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>
  </head>

关于VML，你可以在Microsoft's VML workshop查找更多信息.