中文XML论坛--[转帖]Google Maps API 简易使用文件zz

Google Maps API 简易使用文件zz
发信站: 水木社区 (Wed Nov 2 22:53:44 2005), 站内

Google Maps API 简易使用文件在 Google 推出 Google Maps 之后，网络上出现各种 hack 网站及文件，讨论如何直接从 Google Maps 的 CGI 取得地图图档并推出自己的地图服务，但是这类的网站对 Google 的负荷很大，例如前不久的 Google Maps Wallpaper 即是，大量无节制的下载图档，Google 没多久就将他封杀了，而且各式 hacking 的程序良莠不齐，所以 Google 就干脆自己推出 API 链接库让全世界对 Google Maps 有兴趣的程序设计师能够自行开发 Google Maps 服务，而且 Google 也可以透过 API 来对这些服务做一个控管。

这篇文章主要要介绍如何利用 Google Maps API 来把 Google 所提供的地图服务内嵌到你的网页中，看过这篇介绍后，你会发现这是多么简单的一件事情。如果你有兴趣，不妨一起讨论讨论，或许你也可以想出很有创意的应用来。

目录：
申请一组 Google Maps API Key
第一个范例：在网页嵌入 Google Maps
增加其它信息：Marker，InfoWindow 或是 Polyline
浏览器兼容性问题
其它资源
版权宣告
申请一组 Google Maps API Key
在使用 Google Maps API 之前，你必须向 Google 申请到一组 Key，申请的方法很简单：
首先，先决定你的网页会出现在哪个 URL，例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道该网页的 URL 应该会是 http://blog.knowsky.com，前面包含到最后一个目录的字符串便是要来申请 Key 的基准，也就是blog.knowsky.com。
以你的帐号登入 Google，如果你还没有帐号，请到 https://www.google.com/accounts/ 申请。
连到 Google Maps API Sign Up 网页将 (1) 所决定的 URL 填入，并按 "Generate API Key" 取得 Key。
最后会出现三个方块，分别是你取得的 Key，你指定的 URL，以及一个范例。建议是将范例中的 <script src="..."></script> 整行 Copy/Paste 下来。

Goole Maps API 使用上有些法律上的限制要注意：
你的 Google Maps 服务必须免费开放给一般使用者。
如果你预估你的地图服务会有超过每天 50,000 笔页面的存取量，请主动联络 Google。
Google 会不定期更新 API，你有责任跟着更新你的网页中的 API。
你不能更改或隐藏 Google 的 logo。
Google 有权力以后在地图上放广告，而你不能更改或破坏这些广告。
有些地图应用是 Google 不希望看到的，例如指明哪些地方可以购买到毒品或是任何违法行为。
这些限制我想一般简单的应用都不太会触及，目前为止，Google 也尚未在地图上摆放广告。

第一个范例：在网页嵌入 Google Maps
当你取得一把 API Key 之后，我们就可以来写第一个范例了，这个范例相当简单：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
      //]]>
   </script>
</html>
看范例所呈现的结果
第一行红字的部分就是用你取得的 Key 去加载 Google Maps API，这里要注意的是，你一定要用你自己的 URL 去取得这把 Key，否则网页在加载时，会得到错误讯息。接下来，宣告一个 div 区块用来摆置地图，style="width: 300px; height:300px" 则是用来指定地图区块大小。

再来利用 var map = new GMap (document.getElementById("mymap")); 宣告一个 GMap 对象。而 map.centerAndZoom(new GPoint(139.7600, 35.6700), 1); 则是将地图的中心点固定在经度 139.7600 和纬度 35.6700，而 Zoom Level 在这范例中设成 1 (1 为最大，数字越大 Zoom Level 越小)。在这边你或许会有个疑问，要怎么知道某个地点的经纬度？如果你是在美国或加拿大，有些网站会提供依照地址查询经纬度的服务，但是其它国家就比较麻烦了，而我有个比较简单的方法你可以参考看看，也就是先利用 Google Maps 的大地图找到你要的地点，将他固定在中间，然后按下网页上的 Link to this page，这时候 Google Maps 就会显示出这页的 URL，URL 上就有该点的经纬度了，举例来说，我想要找出日本京都车站的经纬度，我先用 Google Japan Maps 找到车站位置，并将他固定在中心，最后并取得连结：http://maps.google.co.jp/maps?ll=34.982050,135.761490&spn=0.012443,0.020262&hl=ja，红字所标的就是京都车站的经纬度。

这个范例中，你有没有觉得是不是少了什么？那就是少了 Google Maps 中的控件，没有这个你没办法放大缩小地图，也没办法切换卫星空照图。如下范例你就可以在你的地图中加入这两个控件：

<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
      //]]>
   </script>
</html>
看范例所呈现的结果
Google Maps API 内建四种控件：
GLargeMapControl : 适合给大型地图的控件。
GSmallMapControl : 适合给小型地图的控件。
GSmallZoomControl : 只有 Zoom Level 的调整，没有地图移动控制。
GMapTypeControl : 显示地图型态切换的控件。
至于要用什么控件，你可以依照你所提供的地图大小以及用途而定，每一种都试看看吧。

增加其它信息：Marker，InfoWindow 或是 Polyline
Google Maps API 好玩的地方是在于我们可以在地图上面加很多东西，API 也提供一些基本的组件，包含你可以标示一个点，显示信息，甚至在地图上画线。
GMarker
先看看下面这个范例：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);

  var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
         map.addOverlay (KyotoStation);

      //]]>
   </script>
</html>
看范例所呈现的结果
我在这个范例中设立了一个 Marker 标示出京都车站的位置，京都车站经纬度取得的方式如前面所述，最重要的是要新增加一个 GMarker 对象，并将此 Marker 对象加入到 map 对象中。你也可以在地图上标示好几的 Marker，甚至可以用自订的 icon 来标示。

Info Window
除了标示地点外，你也可以在 Marker 上显示额外的信息。
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
  var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));

         GEvent.addListener (KyotoStation, "click", function() {
            KyotoStation.openInfoWindowHtml ("日本京都车站");
         });

         map.addOverlay (KyotoStation);
      //]]>
   </script>
</html>
看范例所呈现的结果
上面这个程序，在当使用者点了该 Marker 时会出现一个方匡显示你输入的文字，这文字可以是 HTML 格式，也就是说允许上面出现图片等信息。那可不可以不用去等到使用者点了之后才出现，可不可以在加载时就出现呢？好象是不行的，至少我测试的结果都会得到一些错误讯息。不过你可以这样做：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);

         map.openInfoWindow (new GPoint(135.761404, 34.982823), document.createTextNode("日本京都车站"));

         map.addOverlay (KyotoStation);
      //]]>
   </script>
</html>
看范例所呈现的结果
直接在地图上显示 Info Window，而不是在 Marker 上。但是 GMap 对象并没有 openInfoWindowHtml() Function，只有 openInfoWindow() 可以用，而这个 Function 是以一个 DOM 对象作为参数，而非 HTML 格式的字符串内容。
GPolyline
在地图上画线，这更酷了，请看以下范例：
<!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>

浏览器兼容性问题
Google Maps API 基本上没有什么浏览器兼容性的问题，他支持的浏览器有：
Firefox/Mozilla
IE 5.5+
Safari 1.2+
Opera
除此外，你也可以利用 GBrowserIsCompatible() 函式来检查使用者的浏览器是否有兼容性上的问题。例如，你可以这样做：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
         if (GBrowserIsCompatible()) {
     var map = new GMap(document.getElementById("mymap"));
     map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
  } else {
     var map = document.getElementById ("mymap");
     map.innerHTML = "";
            map.innerHTML = "Sorry, 你的浏览器不支持 Google Maps";
  }
      //]]>
   </script>
</html>
看范例所呈现的结果

另外，如果你有用到 GPolyline 对象，为了能够在 IE 上也能够正确显示，你必须引用微软的 VML namespace 以及增加一个 CSS Style 来正确显示 VML，关于这个请参考：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/VML/ref/appendix.asp，但是如果是只针对 Firefox/Mozilla 等浏览器则无此困扰。
--
大哥，我先劫个色

※ 来源:·水木社区 http://newsmth.net·[FROM: 61.150.124.*]


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	62.500ms