Elton's Blog

Javascrip

Google MAP API 初步尝试

by Elton on 2009年06月17日, under Javascrip

今天看了一下午Google的API，发现还挺简单的。稍微懂点Javascript就可以了。
写了个小例子

  1.  
  2. <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=your_Google_API_key&sensor=true"
  3.             type="text/javascript"></script>
  4.     <script type="text/javascript">
  5.  
  6.     var map = null;
  7.     var geocoder = null;
  8.  
  9.     function initialize() {
  10.       if (GBrowserIsCompatible()) {
  11.         map = new GMap2(document.getElementById("map_canvas"));
  12.         map.setCenter(new GLatLng(31.22, 121.48), 13);
  13.         geocoder = new GClientGeocoder();
  14.  
  15.         showAddress("上海市淮海中路300号");
  16.       }
  17.     }
  18.  
  19.     function createMarker(point,msg) {
  20.         var marker = new GMarker(point);
  21.                 var message = msg;
  22.                 GEvent.addListener(marker, "click", function() {
  23.                 var myHtml = msg;
  24.                 map.openInfoWindowHtml(point, myHtml);
  25.                 });
  26.                 return marker;
  27.         }
  28.  
  29.     function showAddress(address) {
  30.       if (geocoder) {
  31.         geocoder.getLatLng(
  32.           address,
  33.           function(point) {
  34.             if (!point) {
  35.               alert("不能解析: " + address);
  36.             } else {
  37.               map.setCenter(point, 15);
  38.               var marker = createMarker(point,address);
  39.               map.addOverlay(marker);
  40.             }
  41.           }
  42.         );
  43.       }
  44.     }
  45. </script>
  46. …
  47. <body onload="initialize()" onunload="GUnload()">
  48.  
  49.         <form action="#" onsubmit="showAddress(this.address.value); return false">
  50.       <p style="margin:0">
  51.         <input type="text" size="38" name="address" value="上海市卢湾区" />
  52.         <input type="submit" value="Go!" />
  53.       </p>
  54.       <div id="map_canvas" style="width: 320px; height: 400px"></div>
  55.     </form>
  56.  
  57. …
  58.  

第一个script是来加载Google Map的库

  1.  
  2. <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
  3.         type="text/javascript">
  4. </script>
  5.  

http://ditu.google.cn/maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。在此示例中，该密钥显示为“abcdefg”。

请注意，我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中，我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。

设置地图 DOM 元素

  1.  
  2. <div id="map_canvas" style="width: 320px; height: 400px"></div>
  3.  

要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。

在上述示例中，我们定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。

GMap2 – 基本对象

  1.  
  2. var map = new GMap2(document.getElementById("map_canvas"));
  3.  

GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaScript new 操作符创建此类的一个新实例。

当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子对象，而且我们通过 document.getElementById() 方法获得该元素的引用。

初始化地图

  1.  
  2. map.setCenter(new GLatLng(31.22, 121.48), 13);
  3.  

通过 GMap2 构造函数创建地图后，我们需要再做一件事：将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。

setCenter()的第二个参数表示放大级别，从0到20，0是最小，20是最大。

加载地图

  1.  
  2. <body onload="initialize()" onunload="GUnload()">
  3.  

当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上，我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。

onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。

GUnload() 函数是用来防止内存泄漏的实用工具函数。

地址解析

GClientGeocoder类用来解析地址到经纬度，需要先创建这个类的实例

  1.  
  2. geocoder = new GClientGeocoder();
  3.  

然后调用getLatLng(address:String, callback:function)方法来在地图上定位。

getLatLng(address:String, callback:function) 向 Google 服务器发送请求，对指定的地址进行地址解析。如果地址已成功定位，则用 GLatLng 点调用用户指定的回调函数。否则，向回调函数提供一个 null 点。如果地址不明确，则仅向回调函数传递最匹配的点。

  1.  
  2. geocoder.getLatLng(
  3.           address,
  4.           function(point) {
  5.             if (!point) {
  6.               alert("不能解析: " + address);
  7.             } else {
  8.               map.setCenter(point, 15);
  9.               var marker = createMarker(point,address);
  10.               map.addOverlay(marker);
  11.             }
  12.           }
  13.         );
  14.  

GMarker类用来生成标记，就是地图中的那个红点，它可以有一个信息窗口，通过openInfoWindow方法来打开。

  1.  
  2. var marker = new GMarker(point);
  3.  

通过调用GMap2类的addOverlay(overlay:GOverlay) 方法，给地图添加一个叠加层，用来显示上面定义的标记。

通过GEvent类的addListener方法，为标记添加鼠标点击事件的监听，当在标记上按下鼠标的时候，显示信息窗口。

  1.  
  2. GEvent.addListener(marker, "click", function() {
  3.                 var myHtml = msg;
  4.                 map.openInfoWindowHtml(point, myHtml);
  5.                 });
  6.  

可以在这里查看效果

2 Comments :, , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit my friends!

A few highly recommended friends...

Archives

All entries, chronologically...