用Google Map API自动寻找地址

亲自实践了一下Google Map API的威力。感觉非常不错。总体来看和Adsense的JavaScript API差不多。但是功能更加强大。因为用的是JavaScript，没有平台限制。

废话不说，下面就开始吧。

< script  src ="http://maps.google.com/maps?file=api&amp;v=2&amp;key=免费申请的 API KEY"  type ="text/javascript" ></ script >

这是最先调用的文件。用FireBugs看到有2个js文件和页面一起读取，大约100K。秘密其实都在这里面了。不过这些文件都是压缩过的，变量都改名了，缩进，换行能省就省。所以看起来比较吃力。

Google API网站的资料很全，但还是要一番搜索加上琢磨才能领略到其中的奥妙。

下面是一个查找地址，并在图上标识的JavaScript函数。

 

    //  uses Google Maps API
function  LoadAddress(address)
... {
      if (GBrowserIsCompatible()) ...{
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(20,0),2);
      
        // Create new geocoding object
        geocoder = new GClientGeocoder();
        
        // Retrieve location information, pass it to addToMap()
        geocoder.getLocations(address, function addToMap(response)
            ...{
              if (response.Status.code == G_GEO_SUCCESS)
              ...{
                    // Retrieve the object
                  place = response.Placemark[0];

                  // Retrieve the latitude and longitude
                  point = new GLatLng(place.Point.coordinates[1],
                                      place.Point.coordinates[0]);

                  // Center the map on this point
                  map.setCenter(point, 13);

                  // Create a marker
                  marker = new GMarker(point);

                  // Add the marker to map
                  map.addOverlay(marker);

                  // Add address information to marker
                  marker.openInfoWindowHtml(place.address);
              }
              else
              ...{
                  var reason="Code "+response.Status.code;
                  alert('Could not find address ' + address + '. '+ reason);
              }
            }
        );
      }
}

 

 
如此简单。任何时间只要调用

LoadAddress(address)

参数可以从任何地方获得。这正是JavaScript的优势。

而页面上的处理就更加简单了：

< div  id ="map"  style ="width: 500px; height: 300px;" ></ div >

 

这样一个页面就支持Google Map了。而且每次调用函数就直接可以看到新的地址，动画效果和功能和Google网站的一致。如果有坐标，定点更精确，而且不会有找不到地址的错误产生。找地址功能可能对国内用户支持不好。不过西方国家好似支持得非常不错。