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

使用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>