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