Linux中国 Linux中国门户站!
设为主页 设为主页
收藏本站 收藏本站
 
当前位置 :首页 ->网站设计 ->HTML/DHTML ->正文

Google Maps API 简易使用文件

来源:Linuxdby.com 作者:Webmaster 时间:2007-06-05 点击: [收藏] [投稿]

<!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>

<style type="text/css">
v\:* {
 behavior:url(#default#VML);
}
</style>

<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.770159, 34.986128), 3);
 
 var points = [new GPoint(135.762649, 34.984124), new GPoint(135.762563, 34.986128), new GPoint(135.777369, 34.985952), new GPoint(135.778806, 34.990910)];
 var line = new GPolyline(points, "#ff0000");
        map.addOverlay(line);
 
      //]]>
   </script>
</html>
看范例所呈现的结果
OK,这个范例要告诉你如何从京都车站搭公车到音羽山清水寺。我设定了一串的 GPoint 对象数组,每个点都是线条转折处,并利用此数组新增了一个 GPolyline 对象,并将这 polyline 加到地图中即可(你也可以自订 Polyline 的颜色及大小)。你或许还会注意到这个范例多了一些奇怪的东西,一个 namespace 以及一个 CSS style 设定,这是为了 IE 浏览器的兼容性而加的,关于这个稍后会再提到。


浏览器兼容性问题
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);

 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<



上一篇:网页设计中文字颜色的搭配技巧   下一篇:在网站上实现 Google Reader 一键订阅

文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论
更多相关文章
Power by linux-cn.com 粤ICP备05006655号