初涉Yahoo! Maps AJAX API

2007-8-29 7:33:46 PM
  因为想将相片显示到地图中,今天试验了Yahoo! Maps的API,一点经验分享一下。Yahoo! Maps提供几种调用API的不同方式:Simple API、Flash APIs(又包括AS\JS\FLEX三种)、AJAX API和Image API,具体可查询http://developer.yahoo.com/maps/

  如上图所示,在我这个简单的例子中,是将flickr中相片的GEO tag(即经度和纬度值)传递给API函数,以此坐标定位一个地图并创建Marker显示在地图上,鼠标移至Marker时能显示相片标题和缩略图。
  首先需要申请一个application ID,填写一个简单的表格可以获得。
  创建一个页面,先嵌入AJAX API的JS库:
  替换xxx为你上一步申请的application ID,建立JS函数:
function showmap(title,src,lat,log){    //建立函数,参数依次为 标题,缩略图地址,经度,纬度
    var s = new YSize(300,280)    //定义地图大小
    var map = new YMap(document.getElementById('map'),YAHOO_MAP_HYB,s); // 创建地图到ID为"map"的div
    
    var setupMarker = function(p,d) {    //创建marker的自定义函数
        var m = new YMarker(p);    //创建一个marker
        m.addAutoExpand(d);    //此方法添加一个自动扩展窗口到marker以显示相片标题和缩略图
        return m;
    };
    map.addTypeControl(); // 添加地图显示类型的控制按钮
    map.addZoomLong(); // 添加长条形缩放控制按钮
    var p = new YGeoPoint(lat,log);    //赋坐标到变量p,YGeoPoint是专用于定位的class
    map.drawZoomAndCenter(p, 6);    //定位地图坐标和放大级别,数字越小放大级别越高,共16级
    var m = setupMarker(p,"[b]"+ title +"[/b]" );    //创建marker
    map.addOverlay(m);    //渲染marker到地图
}

  从flickr API传递过来的XML中获取坐标值和标题及图片地址(这一步实现方法略),在HTML中调用showmap():
showmap('Little Living Buddha 小活佛','30.942748','99.609064','http://storage2.flickr.vip.re2.yahoo.com/1125/710985579_2127d525e3_s.jpg')


  本例的demo: http://flickr.poorfish.cn/detail.asp?id=710985579
  Yahoo! Maps AJAX API Reference
Comments [0] | TrackBack[0] | 2105 views | TrackBack

Add your own comment

Name:       *

Password:

Code:        

Your Comment: