[转]使用Google地图API搜索功能

由于工作关系，最近这两天研究了下Google地图API，要实现地图位置搜索功能，显示搜索结果并能在地图上标记下来，刚开始还考虑使用51ditu，出于搜索关键字分词等方面考虑，最后还是决定使用Google地图，一直也都是那么的崇拜谷歌的大神，这次就来体验一翻~

在Google地图标记定位到一点

刚开始是实现在Google地图上定位一点的功能，API接口里GMap2类有一个setCenter(center:GLatLng, zoom?:Number, type?:GMapType)方法可以设置地图中心，GLatLng参数以经度和纬度表示的地理坐标点，zoom和type分别为缩放级别和地图类型的可选参数，GLatLng经纬度坐标点可以通过GClientGeocoder类的getLatLng方法获得，getLatLng方法传入地址关键字参数，在回调函数里传递找到的第一个经纬度坐标点，如果没有找到定位点则为null，这样我们就能根据GLatLng经纬度坐标点创建一个GMarker标记并在地图上显示出来。

搜索定位到多个点

根据关键字定位到会存在一个问题，假如搜索关键字在地图上有多个点的话，那么返回的第一个经纬度坐标点不一定就是你所要找的地址，这个时候就有必要返回多个搜索结果点，然后再能让用户选择。刚开始我还以为Google地图API里没有提供返回多个搜索结果的接口，让老萍各一强银说就跑到了Google AJAX Search API，不过那里确实有实现搜索返回多个结果的示例。今天仔细看了下Google地图API，发现它里面本身是提供搜索功能的，我想AJAX Map Search Solution只是自定义实现封装好了类。其实，在创建GMap2实例时可指定GMapOptions参数，里面的GGoogleBarOptions属性即为搜索控件的选项，然后再调用enableGoogleBar()方法就会为地图启用集成搜索控件，GGoogleBarOptions 类属性如下：

点击搜索结果点信息窗口"错位"问题

问题是这样的，点击返回搜索结果列表时地图会定位到当前点，并且会用信息窗口标注这一点，但不知道Google是为了打开的信息窗口完全可见还是做了什么特殊判断，会使得当前标注这一点不能地图里居中，致使标注点偏移信息窗口显示不完全。由于搜索结果是直接指定resultList元素容器来接收存放的，所以我并不知道在点击事件里对Google地图做了什么样的操作，可能查看gmlocalsearch.js源码会了解一些详情。回到问题的原委来，我只需要获取点击的经纬度坐标点就能把地图位置居中，还好搜索有个onSearchCompleteCallback完成时的回调函数，并传递搜索结果参数过来，那么我就在每次搜索完成把结果保存在一个数组变量里，然后在点击搜索结果列表时获取点击元素的id索引号，于是就能获取当前点击的经纬度坐标了，再调用setCenter就能根据坐标点居中地图，由于有信息窗口，坐标点居中不一定能让信息窗口完全可见，而应该是中偏下一些，调用map.panBy(new GSize(-40,100))方法以动画方式平移指定的距离(左：40px,下：100px)，需要注意Google地图API里很多方法都是以动画方式，它内部可能是通过setTimeout来延迟执行实现的，所以我这边有时也要用setTimeout来延迟执行，不然我设置的一些值会被Google的setTimeout延迟执行的给覆盖掉。

示例源代码：

<div id="googleSearch"></div>
<div id="googleResult" style="width:490px; margin:4px 0;"></div>
<div id="googleMap" style="width:490px; height:300px; border:solid 1px #ccc">loading...</div>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" />
<link href="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css" rel="stylesheet" type="text/css" />
<script src="http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>
<script type="text/javascript">
    var map = null;
    var geocoder = null;
    var mapReady = false;
    var mapResult = [];
    function initialize() {
        if (GBrowserIsCompatible()) {
    
        //搜索结果元素
        var resultElem = document.getElementById("googleResult");
        //地图容器元素
        var mapElem = document.getElementById("googleMap");
        
        // 指定实例化地图选项    
        var options = {
            //size : new GSize (338,353),
            googleBarOptions : {
                onSearchCompleteCallback : function(searcher) {
                    //设置结果
                    mapResult = searcher.results;
                    //统计结果数
                    //document.getElementById("sum").innerHTML = searcher.results.length;
                    //搜索完成时候自动居中第一个结果
                    setTimeout(function() {autoCenter(0);},1000);
                },
                resultList : resultElem ,
                maxCursorPages : 5 ,
                suppressZoomToBounds : true
            }
        };
          
        map = new GMap2(mapElem, options);
        
        // 平移及缩放控件（左上角）
        map.addControl(new GLargeMapControl());
        //比例尺控件（左下角）
        map.addControl(new GScaleControl());
        
        //创建缩略图控件（右下角）
        var overviewMap = new GOverviewMapControl();
        map.addControl(overviewMap);
        //最小化隐藏缩略图控件
        setTimeout(function (){overviewMap.hide();},1000);
        
        geocoder = new GClientGeocoder();
        
        //为地图启用集成搜索控件GoogleBar(此句顺序位置不可修改)
        map.enableGoogleBar();
        
        //自动居中结果点
        window.autoCenter = function (resultIndex){
            var result = mapResult[resultIndex];
            if( result ) {
                setTimeout(function() {
                        //构建以经度和纬度表示的地理坐标点
                        var point = new GLatLng(result.lat,result.lng);
                        //设置中心点
                        map.setCenter(point);//map.panTo(point);
                        //以动画方式平移指定的距离(左：40px,下：100px)
                        map.panBy(new GSize(-40,100));
                    },
                    500
                );
            }
        }
        
        //点击搜索结果事件
        resultElem.onclick = function (e){
            e = window.event || e;
            var target = e.target || e.srcElement;
            var trElem = target;
            //获取冒泡事件的TR层节点
            while(trElem && trElem.tagName!="TR")
            {
                if(trElem.tagName=="TABLE") break;
                trElem = trElem.parentNode;
            }
            if (trElem!=null)
            {
                //获取点击的结果索引
                var resultIndex = trElem.id.substring(trElem.id.length-1);
                //自动居中
                autoCenter(resultIndex);
            }
        }
    
        //初始化位置
        var address = "广东省广州市天河区科韵路22号五华大厦";
        if (geocoder) {
            geocoder.getLatLng(
              address,
              function(point) {
                if (point) {
                  map.setCenter(point, 18);
                  var marker = new GMarker(point);
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(address);
                  setTimeout(function (){map.panBy(new GSize(-10,120));},2500);
                }
              }
            );
        }
        
        //获取搜索控件
        var searchBar = mapElem.lastChild;
        //清空样式
        searchBar.style.cssText = "";
        //改变搜索控件元素位置
        document.getElementById("googleSearch").appendChild(searchBar);
        
      }
    }
    
    window.onload = function(){
        initialize();
        document.body.onunload = GUnload;
        mapReady = true;
    }
</script>