Google Map 在产品中的应用

     最近由于工作需要研究了下Google地图，网络上也有不少相关文章。同时Google已经提供了很详尽的API及说明。我在使用Google API期间有部分内容还是值得拿出来于园友分享的。

   一、调用Google Map API  无法出现周边生活设施

---

       当我们使用Google API 提供的方法，将Google Map 加载到自己的html表单中。此时在地图上只能看见目标地点，并不能看见目标地点的周边生活设置，比如周边的银行、学校、超市等。此功能Google未提供在API中直接调用。截图如下：

  二、封装自定义GMapMaker 对象

---

  上图中的显示效果从用户交互上来说，不是太理想。现在为Google Map 新增周边生活设施，让地图上的元素更加丰富。封装一段js代码。该代码如下：

/*
*Author:Ryan Ding
*Date:2010-03-09
*Summary：GMapMark 类 将 Google API Local Search 查询到的内容写入google map中。
 */

 var GMapMaker =
 function () {
    var gSize = new GSize(16, 16);
    var restaurantIcon = new GIcon(G_DEFAULT_ICON);
    restaurantIcon.image = "restaurant.png";
    restaurantIcon.iconSize = gSize;
    restaurantIcon.iconAnchor = new GPoint(8, 20);
    restaurantIcon.shadow = "";

    var bankIcon = new GIcon(G_DEFAULT_ICON);
    bankIcon.image = "bank.png";
    bankIcon.iconSize = gSize;
    bankIcon.iconAnchor = new GPoint(8, 20);
    bankIcon.shadow = "";

    var shoppingIcon = new GIcon(G_DEFAULT_ICON);
    shoppingIcon.image = "shopping.png";
    shoppingIcon.iconSize = gSize;
    shoppingIcon.iconAnchor = new GPoint(8, 20);
    shoppingIcon.shadow = "";

    var schoolIcon = new GIcon(G_DEFAULT_ICON);
    schoolIcon.image = "school.png";
    schoolIcon.iconSize = gSize;
    schoolIcon.iconAnchor = new GPoint(8, 20);
    schoolIcon.shadow = "";

    var hospitalIcon = new GIcon(G_DEFAULT_ICON);
    hospitalIcon.image = "hospital.png";
    hospitalIcon.iconSize = gSize;
    hospitalIcon.iconAnchor = new GPoint(8, 20);
    hospitalIcon.shadow = "";

    var marketIcon = new GIcon(G_DEFAULT_ICON);
    marketIcon.image = "market.png";
    marketIcon.iconSize = gSize;
    marketIcon.iconAnchor = new GPoint(8, 20);
    marketIcon.shadow = "";


    var _opts = {
        keyWord: "餐厅",
        latlng: new GLatLng(24.467571, 118.113155),
        icon: new GIcon(G_DEFAULT_ICON),
        zoom: 14,
        searchSize: 8
    };

    //alert("GMarker init");
     google.load('search', '1');

    var initSettings = function (opts) {
        _opts.latlng = opts.latlng || new GLatLng(24.467571, 118.113155);
        _opts.zoom = 14;
    }

    var addMark = function (latlng, title, desc, icon_) {
        var mark = new GMarker(latlng, { icon: icon_ || new GIcon(G_DEFAULT_ICON), title: title });
        var html = desc;
        GEvent.addListener(mark, 'click', function () {
            mark.openInfoWindowHtml(html);
        });
        //mark.openInfoWindowHtml(html);
         this.map.addOverlay(mark);
    };

    var proccesslocalSearch = function (gSearch, keyWord, icon_) {
        gSearch.setResultSetSize(GSearch.LARGE_RESULTSET); // LARGE_RESULTSET FILTERED_CSE_RESULTSET
        gSearch.setCenterPoint(_opts.latlng, _opts.zoom);
        gSearch.setSearchCompleteCallback(this, function () {
            for (var i = 0; i < gSearch.results.length; i++) {
                addMark(new GLatLng(gSearch.results[i].lat, gSearch.results[i].lng),
                                  gSearch.results[i].title,
                                  gSearch.results[i].title, icon_);
            }
        });
        gSearch.execute(keyWord);
    }

    var onLoadBank = function () {
        var localSearch = new google.search.LocalSearch();
        proccesslocalSearch(localSearch, "银行", bankIcon);
    }

    var onLoadSchool = function () {
        var localSearch = new google.search.LocalSearch();
        proccesslocalSearch(localSearch, "学校", schoolIcon);

    }

    var onLoadRestaurant = function () {
        var localSearch = new google.search.LocalSearch();
        proccesslocalSearch(localSearch, "餐饮", restaurantIcon);

    }

    var onLoadMarket = function () {
        var localSearch = new google.search.LocalSearch();
        proccesslocalSearch(localSearch, "超市", restaurantIcon);

    }

    var onLoadHospital = function () {
        var localSearch = new google.search.LocalSearch();
        proccesslocalSearch(localSearch, "医院", hospitalIcon);

    }


    return {
        autoSetMapPoint: function (ops) {
            //alert("autoSetMapPoint");
            initSettings(ops);
            google.setOnLoadCallback(onLoadBank);
            google.setOnLoadCallback(onLoadSchool);
            google.setOnLoadCallback(onLoadRestaurant);
            google.setOnLoadCallback(onLoadMarket);
            google.setOnLoadCallback(onLoadHospital);

        }
    }
} ();
    

GMapMark代码很简单，主要使用了Google API 中的 Google Local Search 方法，把Local Search 查询到的周边设施加入到地图中。使用GmapMark后的地图效果截图为：

  三、小结

---

    本篇中的目标地点“武汉大厦”使用了elabel.js这个javascript 类库，您如果感兴趣可以去这里下载：http://econym.org.uk/gmap/elabel.htm。相关Google Map API 可以在这里查阅：http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/controls.html。