Google Map Api實踐之驢友圖片

        與國外的ESRI、MapInfo，國內的SuperMap、MapGIS等GIS平台軟體相比，Google Map Api的那些功能可能不值一提，但是基於google高精度的衛星影像圖、地理資料資訊，卻不禁讓我們眼前一亮。基於之上的Goolge Earth、即時交通流量、3D街景視圖更是炫目。而作為基礎的Goolge Map api 也足夠為我們提供基本的GIS功能，包括基本的資訊查詢、定位。

        驢友圖片 是我在www.lvtumap.com中寫的一個為驢友提供相片瀏覽的一個基於google map api的應用，主要實現目前範圍內景點圖片的擷取並標註在對應的地理位置，供驢友在地圖上即可查看景點的圖片，也讓我們在家也能感受到異域風情，下方搜尋欄中輸入“夏威夷”，即可定位到夏威夷，然後點擊“擷取當前視圖的圖片”，就可大飽眼福夏威夷的美景。功能實現上主要包括以下部分：

1、 擷取圖片。驢友圖片由panoramio這個網站的api擷取，它也是google下的一個圖片儲存的網站，可以在儲存圖片時指定圖片拍攝地的經緯度，或如果圖片本身就有經緯度資訊時可自動儲存到指定的地理位置。panoramio的api詳細說明可去其網站查看，我們主要是發送一個HttpWebRequest請求，包括視圖地區範圍的minx,miny,maxx,maxy等參數，這樣就可擷取該視圖內的詳細圖片資訊，以json格式返回。

2 、處理json。由panoramio返回的json中包括很多資訊，包括圖片地址，經緯度座標等。通過對其的處理，我們產生對應的Google Map Api中的Marker放到地圖上進行標註。

           for (var i = 0; i < photos.length; i++) {
                    var icon = new GIcon(masterIcon, getImageUrl("mini_square", photos[i].photo_id));
                    var marker = new GMarker(new GLatLng(photos[i].latitude, photos[i].longitude), icon);
                    marker.photo = photos[i];
                    markers[i] = marker;
                    map.addOverlay(marker, icon);
}

3、設定地圖上的監聽等，使用者點擊圖片時即可顯示大圖，方便查看。

 GEvent.addListener(map, "click", function(overlay, point) {
                    if (!overlay || !overlay.photo)
                        return;
                    var p = overlay.photo;
                    showinfowindow(overlay, p);
                });

4、整個過程使用Ajax技術，在用戶端js發起對handler的調用，在handler中發起HttpWebRequest到panoramio，返回對應的json格式字串。然後通過js對json格式字串eval後，讀取對應的photo地址和相應的經緯度，即可無重新整理地顯示不同地區的圖片了。Demo請見http://www.lvtumap.com/MapPic.aspx