opensocial

opensocial

Star Trek has long been a surprisingly accurate predictor of future technology. For example, the communicator was a precursor to the cell phone. Similarly, in Star Trek: The Next Generation, the crew aboard the Starship Enterprise wore badges that contained an intelligent location-aware system – the characters could ask the badge questions about their location, and discover information about what was around them.

长期以来，《 星际迷航》一直是未来技术令人惊讶的准确预测器。 例如， 通信器是手机的前身。 同样，在《 星际迷航：下一代》中 ，星际飞船企业号上的机组人员佩戴的徽章上装有一个智能的位置感知系统-角色可以询问徽章有关其位置的问题，并了解周围的信息。

Today, the ability to perform this kind of location sensing and mapping is bringing about a new wave of applications that answer useful questions, such as: “Where am I?”, “Who is nearby?”, and “What are they doing?”

如今，执行这种位置感测和地图绘制的能力带来了新的应用程序浪潮，这些应用程序可以回答有用的问题，例如：“我在哪里？”，“谁在附近？”以及“他们在做什么？ ”

In this article, I’ll show you how to combine Flex/Flash, Google Maps, Flickr, and OpenSocial to create some cool example applications that you could use as the basis for your own development. You can download the code archive for this article if you’d like to play along at home.

在本文中，我将向您展示如何结合使用Flex / Flash，Google Maps，Flickr和OpenSocial来创建一些很酷的示例应用程序，您可以将它们用作自己开发的基础。 如果您想在家玩，可以下载本文的代码档案 。

Pay attention – there will be a quiz at the end! The first 100 people to complete the quiz will win a copy of my book, Getting Started With Flex 3, delivered to their front door for FREE, thanks to Adobe. You can also download the book in PDF format for free for a limited time.

请注意-最后会有测验 ！ 前100名完成测验的人将赢得我的书《 Flex 3入门》 ，这本书是免费的，这要归功于Adobe。 您也可以在限定时间内免费下载PDF格式的图书 。

入门 (Getting Started)

If you haven’t played with Flex before, it’s a platform for building Rich Internet Applications in Flash using MXML (an XML-based markup language) and ActionScript. The compiler and framework are open source, and you can download those directly from Adobe. You can also download the Flex Builder 3 IDE on a trial basis from Adobe. Flex Builder is definitely the easiest way to develop Flex applications because it supports syntax highlighting, code lookups, and all of the modern features one expects from a professional programming editor. I recommend reading this beginner Flex tutorial if you’re just getting started.

如果您以前没有玩过Flex，那么它是一个使用MXML(一种基于XML的标记语言)和ActionScript在Flash中构建Rich Internet Application的平台。 该编译器和框架是开源的，您可以直接从Adobe下载这些文件 。 您也可以从Adobe试用版下载Flex Builder 3 IDE 。 Flex Builder绝对是开发Flex应用程序的最简单方法，因为它支持语法高亮显示，代码查找以及专业编程编辑器所期望的所有现代功能。 如果您刚刚入门，建议您阅读此Flex初学者教程 。

Google Maps is a site with which you’re probably already familiar, but you may not be aware that there’s also a Flash version of Google Maps which supports the same API as the JavaScript version. This is the version we’ll be using in these examples.

Google Maps是一个您可能已经熟悉的站点，但是您可能没有意识到，还有Flash版本的Google Maps支持与JavaScript版本相同的API。 这是我们在这些示例中将使用的版本。

Before we begin, you’ll need to obtain API keys for both Flickr and Google Maps, if you don’t have them already. The Google Maps API application process requires that you enter the URL of the site from which you’ll be requesting the maps. We’ll be running this application on our local machine – at least initially, anyway – so I recommend using a URL of http://localhost/.

在我们开始之前，您需要同时获取Flickr和Google Maps的 API密钥。 Google Maps API申请流程要求您输入要从其请求地图的站点的URL。 无论如何，至少在最初，我们将在本地计算机上运行此应用程序，因此，我建议使用http://localhost/的URL。

显示地图 (Displaying a Map)

First, let’s create a small Flex application that simply embeds a Google Map. The code for this app looks like this:

首先，让我们创建一个小的Flex应用程序，该应用程序仅嵌入Google Map。 该应用程序的代码如下所示：

Listing 1. Flickrmap.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  creationComplete="onStartup()"> <mx:Script> <![CDATA[ import com.google.maps.services.GeocodingEvent; import com.google.maps.services.ClientGeocoder; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.MapEvent; import com.google.maps.LatLng; import com.google.maps.Map; import mx.core.UIComponent; private var map:Map = new Map(); private function onStartup() : void {  var uic:UIComponent = new UIComponent();  uic.setStyle( 'top', 0 );  uic.setStyle( 'left', 0 );  uic.width = width;  uic.height = height;  addChildAt( uic, 0 );  map.key = 'Your Google Maps Key';  map.width = width;  map.height = height;  map.addEventListener( MapEvent.MAP_READY, onMapReady );  uic.addChild( map );  locPanel.setStyle( 'top', height - locPanel.height - 20 ); } private function onMapReady( event:MapEvent ) : void {  map.setCenter( new LatLng( 34.101509, -118.32691 ) );  map.setZoom( 12 );  map.addControl( new MapTypeControl() );  map.addControl( new ZoomControl() ); } private function onGeocodeSuccess( event:GeocodingEvent ) : void {  map.setCenter( event.response.placemarks[0].point ); } private function onKeyDown( event:KeyboardEvent ) : void {  if ( event.keyCode == Keyboard.ENTER ) {    var cg:ClientGeocoder = new ClientGeocoder( "USA" );    cg.addEventListener( GeocodingEvent.GEOCODING_SUCCESS, onGeocodeSuccess );    cg.geocode( loc.text );  } } ]]> </mx:Script> <mx:Panel id="locPanel" title="Location" top="500" left="20" borderAlpha="0.95">  <mx:TextInput id="loc" keyDown="onKeyDown( event )" width="300" text="fremont, ca" /> </mx:Panel> </mx:Application>

In the onStartup method, we create the map and register an event handler to listen for a MAP_READY message. As soon as that message is detected, we call the onMapReady method, which adds some controls to the map.

在onStartup方法中，我们创建地图并注册事件处理程序以侦听MAP_READY消息。 一旦检测到该消息，我们将调用onMapReady方法，该方法将一些控件添加到地图中。

The user interface consists of a text input field, into which the user enters a street address. Our application monitors changes to this field via the keyDown attribute; when the user presses the Enter key (Return on a Mac) we perform a geocode lookup on the address that was entered. Performing a geocode lookup (commonly known simply as geocoding) takes an address and returns a latitude and longitude. The onGeocodeSuccess method is called when this process was successful, and Google has provided us with a valid latitude and longitude pair. We then center the map based on this geographical coordinate.

用户界面包含一个文本输入字段，用户可以在其中输入街道地址。 我们的应用程序通过keyDown属性监视对该字段的更改； 当用户按下Enter键(在Mac上为Return键)时，我们会对输入的地址执行地址解析。 执行地址解析查询(通常简称为地址解析)会获取地址并返回纬度和经度。 成功完成此过程后，将调用onGeocodeSuccess方法，并且Google为我们提供了有效的纬度和经度对。 然后，我们基于此地理坐标将地图居中。

Let’s see if our application works. Launch the code from Flex Builder, and you should see something similar to the image in Figure 1.

让我们看看我们的应用程序是否有效。 从Flex Builder启动代码，您应该看到类似于图1的图像。

Hold up – why are the words “debug mode” plastered all over our map? Who said anything about debug mode?

坚持一下-为什么在我们的地图上都贴满“调试模式”一词？ 谁对调试模式说什么？

Well, it turns out the Google Maps key is associated with a URL, and the URL we gave it was http://localhost/. However, the URL that our application is currently running from is a file URL pointing to somewhere on the disk.

好吧，事实证明Google Maps密钥与一个URL相关联，而我们给它的URL是http://localhost/ 。 但是，我们的应用程序当前从中运行的URL是指向磁盘上某个位置的文件URL。

What we need to do is tweak our project settings so that Flex Builder places the compiled SWF files and such in the local web server directory. If you’re running on Windows, this probably means storing them somewhere in c:inetpubwwwroot (for the IIS web server) or c:apachehtdocs (for Apache). On a Mac, these files can be placed in either ~/Sites or in /Library/WebServer/Documents.

我们需要做的是调整项目设置，以便Flex Builder将已编译的SWF文件等放置在本地Web服务器目录中。 如果您在Windows上运行，则可能意味着将它们存储在c:inetpubwwwroot (对于IIS Web服务器)或c:apachehtdocs (对于Apache)中。 在Mac上，这些文件可以放在~/Sites或/Library/WebServer/Documents 。

The two settings you need to change in the project settings are the Output Folder, which is where we want Flex Builder to copy our files, and Output Folder URL, which is the URL of that folder on the web server. These text fields are shown in Figure 2.

在项目设置中需要更改的两个设置是“输出文件夹”，这是我们希望Flex Builder复制文件的位置；以及“输出文件夹URL”，这是Web服务器上该文件夹的URL。 这些文本字段如图2所示。

Once you’ve made these changes, re-launch the application. You should see something like the image shown in Figure 3.

完成这些更改后，请重新启动该应用程序。 您应该看到类似图3所示的图像。

Now when the user presses Enter after typing a value into the Location input field, our application runs the geocode and sets the center of the map to the value that was typed – Fremont, California, in the case of the example above.

现在，当用户在“位置”输入字段中输入值后按Enter键时，我们的应用程序将运行地址解析并将地图的中心设置为输入的值-在上述示例中，是加利福尼亚州的弗里蒙特市。

添加Flickr结果 (Adding Flickr Results)

The next step is to add functionality for our application to communicate with the Flickr web server. Specifically, we’re after images that correspond to the current latitude and longitude of our map. The cool thing about Flickr is that many of its images are geotagged. This means that we can provide Flickr with a latitude, longitude, and radius, and it will return a selection of photos taken within the area specified by those parameters.

下一步是为我们的应用程序添加与Flickr Web服务器通信的功能。 具体来说，我们正在寻找与地图当前纬度和经度相对应的图像。 关于Flickr的最酷的事情是它的许多图像都经过地理标记。 这意味着我们可以为Flickr提供纬度，经度和半径，并且它将返回在这些参数指定的区域内拍摄的照片的选择。

There is a Flickr library for Flex, but it doesn’t currently support the geotagging API. So in the code below, I’ve queried the Flickr REST API directly by using a Flex HTTP Service:

有一个适用于Flex的Flickr库，但当前不支持地理标记API。 因此，在下面的代码中，我已经通过使用Flex HTTP服务直接查询了Flickr REST API：

Listing 2. The Flickr Mapping application   <?xml version="1.0" encoding="utf-8"?>   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    creationComplete="onStartup()">   <mx:Script>   <![CDATA[   import com.google.maps.overlays.MarkerOptions;   import com.google.maps.overlays.Marker;   import mx.rpc.events.ResultEvent;   import com.google.maps.services.GeocodingEvent;   import com.google.maps.services.ClientGeocoder;   import com.google.maps.controls.ZoomControl;   import com.google.maps.controls.MapTypeControl;   import com.google.maps.MapEvent;   import com.google.maps.LatLng;   import com.google.maps.Map;   import mx.core.UIComponent;   private const FLICKR_KEY:String = 'Your Flickr Key';   private var map:Map = new Map();   private function createFlickrURL( search:String, lat:Number, lng:Number, radius:Number = 20 ) : String {    var query:String = 'http://api.flickr.com/services/rest/?api_key='+FLICKR_KEY;    query += '&method=flickr.photos.search&text=dog&extras=geo&lat='+lat+'&lon='+lng+'&radius='+radius;    query += '&per_page=100&page=1&sort=date-posted-desc';    return query;   }   private function onStartup() : void {    var uic:UIComponent = new UIComponent();    uic.setStyle( 'top', 0 );    uic.setStyle( 'left', 0 );    uic.width = width;    uic.height = height;    addChildAt( uic, 0 );    map.key = 'Your Google Maps Key';    map.width = width;    map.height = height;    map.addEventListener( MapEvent.MAP_READY, onMapReady );    uic.addChild( map );    locPanel.setStyle( 'top', height - locPanel.height - 20 );   }     private function onMapReady( event:MapEvent ) : void {    map.setCenter( new LatLng( 34.101509, -118.32691 ) );    map.setZoom( 12 );    map.addControl( new MapTypeControl() );    map.addControl( new ZoomControl() );   }   private function onSearch() : void {    flickrSearch.url = createFlickrURL( searchText.text, map.getCenter().lat(), map.getCenter().lng() );    flickrSearch.send();   }   private function onFlickrResult( event:ResultEvent ) : void {    map.clearOverlays();    for each( var photo:XML in event.result..photo ) {      var pMarker:Marker = new Marker( new LatLng( photo.@latitude, photo.@longitude ),        new MarkerOptions( {          label:photo.@title,          hasShadow:true } ) );      map.addOverlay( pMarker );    }   }   private function onGeocodeSuccess( event:GeocodingEvent ) : void {    map.setCenter( event.response.placemarks[0].point );    onSearch();   }   private function onKeyDown( event:KeyboardEvent ) : void {    if ( event.keyCode == Keyboard.ENTER ) {      var cg:ClientGeocoder = new ClientGeocoder( "USA" );      cg.addEventListener( GeocodingEvent.GEOCODING_SUCCESS, onGeocodeSuccess );      cg.geocode( loc.text );    }   }   ]]>   </mx:Script>   <mx:HTTPService id="flickrSearch" resultFormat="e4x" result="onFlickrResult(event)" />   <mx:Panel id="locPanel" title="Location" top="500" left="20" borderAlpha="0.95" layout="vertical">    <mx:TextInput id="searchText" keyDown="onKeyDown( event )" width="300" text="dog" />    <mx:TextInput id="loc" keyDown="onKeyDown( event )" width="300" text="fremont, ca" />   </mx:Panel>   </mx:Application>

You’ll notice at the bottom of the file that I’ve added a searchText field in addition to the location field. This field contains the search term that we’ll send to Flickr in addition to the current map location.

您会注意到，在文件底部，除了位置字段外，我还添加了searchText字段。 该字段除了包含当前地图位置之外，还包含我们将发送给Flickr的搜索词。

The bulk of the code that renders our map is unchanged from the simple example that we looked at a moment ago. The new stuff happens when the onGeocodeSuccess method calls the onSearch method to start a Flickr search. That Flickr search uses the flickrSearch HTTP service with a URL that we generate on the fly using the createFlickrURL method.

与我们刚才看过的简单示例相比，呈现地图的大部分代码没有变化。 当onGeocodeSuccess方法调用onSearch方法开始Flickr搜索时， onGeocodeSuccess发生新的事情。 Flickr搜索使用flickrSearch HTTP服务以及我们使用createFlickrURL方法动态生成的URL。

When our query to Flickr returns a selection of results (expressed as XML), the onFlickrResult method is called. This method takes that XML and looks for the photo elements in the XML tree. It then creates a Google Maps Marker object for each of the photos and adds this marker to the map.

当我们对Flickr的查询返回结果选择(表示为XML)时，将onFlickrResult方法。 此方法采用该XML，并在XML树中查找照片元素。 然后，它为每张照片创建一个Google Maps Marker对象，并将此标记添加到地图中。

Figure 4 shows the result of running this code.

图4显示了运行此代码的结果。

Things are really starting to come together – our user can find photos of something given a location. But what if he or she actually wants to view the photo?

事情真的开始融合在一起-我们的用户可以在给定位置的情况下找到照片。 但是，如果他或她真的想查看照片怎么办？

Let’s adjust our code to add this feature:

让我们调整代码以添加此功能：

Listing 3. The updated code   private function createMarker( photo:XML ) : void {    var reqUrl:String = 'http://static.flickr.com/'+photo.@server+'/'+photo.@id+'_'+photo.@secret+'_s.jpg';    var pMarker:Marker = new Marker( new LatLng( photo.@latitude, photo.@longitude ),      new MarkerOptions( {      label:photo.@title,      tooltip:photo.@title,      name: reqUrl,        hasShadow:true } ) );    pMarker.addEventListener( MapMouseEvent.CLICK, function( event:MapMouseEvent ) : void {      pMarker.openInfoWindow( new InfoWindowOptions(        { contentHTML: '<img width="75" height="75" src="'+reqUrl+'">' } ) );    } );    map.addOverlay( pMarker );   }   private function onFlickrResult( event:ResultEvent ) : void {    map.clearOverlays();    for each( var photo:XML in event.result..photo )      createMarker( photo );   }

In the code above, we’ve changed the onFlickrResult function so that it just calls createMarker. The createMarker method in turn creates a Marker, and we’ve added an event listener to detect when the user clicks on the Marker. When this happens, we display a small “info window” above our marker. This info window, which resembles a speech bubble, contains a thumbnail version of the Flickr image.

在上面的代码中，我们更改了onFlickrResult函数，使其仅调用createMarker 。 反过来， createMarker方法创建一个Marker，并且我们添加了一个事件侦听器来检测用户何时单击Marker。 发生这种情况时，我们会在标记上方显示一个小的“信息窗口”。 该信息窗口类似于气泡，包含Flickr图像的缩略图版本。

Figure 5 shows this thumbnail display code in action.

图5显示了此缩略图显示代码的运行情况。

So, there we have it – we can produce Flickr pictures of big poodle-esque dogs in Fremont.

因此，有了它–我们可以在弗里蒙特(Fremont)制作大像贵宾犬的Flickr图片。

Now, what if we want to view images of people?

现在，如果我们要查看人物图像怎么办？

映射OpenSocial (Mapping OpenSocial)

Mapping people is a more complicated task than mapping geotagged images. Each of the major social networks (Facebook, MySpace, LinkedIn, and the like) make available their own APIs to use when searching for people. However, these networks are gradually unifying via a standard called OpenSocial.

映射人比映射地理标记的图像要复杂得多。 每个主要的社交网络(Facebook，MySpace，LinkedIn等)都提供了自己的API，供人们搜索时使用。 但是，这些网络正在通过称为OpenSocial的标准逐渐统一。

OpenSocial was originally conceived as a common API for social networking applications. However, the release of version 0.8 offers a REST API that you can use to perform queries of a social network.

OpenSocial最初被认为是用于社交网络应用程序的通用API。 但是，版本0.8的发布提供了REST API ，您可以使用该API执行社交网络的查询。

The only problem is that no major social networking sites have implemented 0.8 so far, so unfortunately we can’t take advantage of this feature just yet.

唯一的问题是，到目前为止，尚无主要的社交网站实现0.8，因此很遗憾，我们暂时无法利用此功能。

Don’t lose heart! This is an exciting space, and the goal posts are constantly changing. So what should you do when you hit a wall? Build your own door! For this example, we’re going to create a dummy OpenSocial REST response in PHP. While this won’t allow us to actually perform any OpenSocial queries, it’ll be a proof of concept, showing that the REST API will certainly be ready to go once the social networks begin implementing version 0.8, which shouldn’t be too far away.

不要灰心！ 这是一个令人兴奋的空间，并且目标位置不断变化。 那么，碰壁时该怎么办？ 建立自己的门！ 对于此示例，我们将在PHP中创建一个虚拟的OpenSocial REST响应。 虽然这不允许我们实际执行任何OpenSocial查询，但这将是一种概念证明，表明一旦社交网络开始实施0.8版，REST API肯定可以使用，这应该不会太过分远。

Here we go. Since REST is a URL-based API, we need to perform some URL rewriting to turn a URL like this …

开始了。 由于REST是基于URL的API，因此我们需要执行一些URL重写以将URL变成这样……

http://localhost/~jherr/people/@me/self

… into this:

…变成这样：

http://localhost/~jherr/index.php?q=/people/@me/@self

The best tool for the job is Apache mod_rewrite. If you’re new to mod_rewrite, check out this comprehensive tutorial. Ensure that you have the mod_rewrite module installed, and add the following code to your .htaccess file:

最好的工具是Apache mod_rewrite 。 如果您是mod_rewrite新手，请mod_rewrite 这个全面的教程 。 确保已安装mod_rewrite模块，并将以下代码添加到您的.htaccess文件中：

Options +FollowSymLinks <IfModule mod_rewrite.c>    RewriteEngine on    RewriteBase /    RewriteCond %{REQUEST_FILENAME} !-f    RewriteCond %{REQUEST_FILENAME} !-d    RewriteRule ^(.*)$ ~jherr/index.php?q=$1 [L,QSA]   </IfModule>

This rewrites the REST request URL into a URL that resembles an invocation of our index.php file.

这会将REST请求URL重写为类似于我们的index.php文件的调用的URL。

The code for our index.php file looks like this:

我们的index.php文件的代码如下所示：

Listing 4. The index.php file   <?php   header( 'Content-type: text/xml' );   ?>   <entry xmlns="https://www.w3.org/2005/Atom">   <content type="application/xml">    <person xmlns="http://ns.opensocial.org/2008/opensocial">     <name>      <unstructured>Jane Doe</unstructured>     </name>     <about_me>Living in Fremont</about_me>     <address>      <longitude>-121.987259</longitude>      <latitude>37.54987</latitude>     </address>    </person>   </content>   ...   <title/>   <updated>2003-12-13T18:30:02Z</updated>   <author/>   <id>urn:guid:example.org:34KJDCSKJN2HHF0DW20394</id>   </entry>

For this demo, we’ve manually created a person and structured their data in the XML OpenSocial 0.8 XML format. Until this version is supported by one or more of the social networking applications, you’ll need to resort to generating this XML data yourself.

对于此演示，我们手动创建了一个人，并以XML OpenSocial 0.8 XML格式构造了他们的数据。 在一个或多个社交网络应用程序支持此版本之前，您将需要依靠自己生成此XML数据。

The Flex code that maps the XML returned by our index.php file is shown below:

映射我们的index.php文件返回的XML的Flex代码如下所示：

Listing 5. The OpenSocial Flex application   <?xml version="1.0" encoding="utf-8"?>   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    creationComplete="onStartup()">   <mx:Script>   <![CDATA[   import com.google.maps.InfoWindowOptions;   import com.google.maps.MapMouseEvent;   import com.google.maps.overlays.MarkerOptions;   import com.google.maps.overlays.Marker;   import mx.rpc.events.ResultEvent;   import com.google.maps.services.GeocodingEvent;   import com.google.maps.services.ClientGeocoder;   import com.google.maps.controls.ZoomControl;   import com.google.maps.controls.MapTypeControl;   import com.google.maps.MapEvent;   import com.google.maps.LatLng;   import com.google.maps.Map;   import mx.core.UIComponent;   private var map:Map = new Map();   private namespace OS='http://ns.opensocial.org/2008/opensocial';   private namespace Atom='https://www.w3.org/2005/Atom';   private function onStartup() : void {    var uic:UIComponent = new UIComponent();    uic.setStyle( 'top', 0 );    uic.setStyle( 'left', 0 );    uic.width = width;    uic.height = height;    addChildAt( uic, 0 );    map.key = 'Your Google Maps Key';    map.width = width;    map.height = height;    map.addEventListener( MapEvent.MAP_READY, onMapReady );    uic.addChild( map );   }     private function onMapReady( event:MapEvent ) : void {    map.setZoom( 10 );    map.addControl( new MapTypeControl() );    map.addControl( new ZoomControl() );    osSearch.send();   }   private function createMarker( person:XML ) : void {    use namespace OS;    var pMarker:Marker = new Marker( new LatLng( person.address.latitude, person.address.longitude ),      new MarkerOptions( {      label:person.name.unstructured,        tooltip:person.name.unstructured,        hasShadow:true } ) );    pMarker.addEventListener(MapMouseEvent.CLICK,function( event:MapMouseEvent ) : void {      pMarker.openInfoWindow( new InfoWindowOptions( { content: person.name.unstructured.toString() } ) );    } );    map.addOverlay( pMarker );   }   private function onOpenSocialResult( event:ResultEvent ) : void {    map.clearOverlays();    var first:Boolean = true;    use namespace OS;    for each ( var person:XML in event.result..person ) {      createMarker( person );      if ( first ) {        map.setCenter( new LatLng( person.address.latitude, person.address.longitude ) );        first = false;      }    }   }   ]]>   </mx:Script>   <mx:HTTPService id="osSearch" url="http://localhost/~jherr/people/@me/@self"    resultFormat="e4x" result="onOpenSocialResult(event)" />   </mx:Application>

As you may have noticed, this code is very similar to the the code we used in our Flickr application. However, instead of requesting data from Flickr, this time we’re requesting data from our localhost URL.

您可能已经注意到，此代码与我们在Flickr应用程序中使用的代码非常相似。 但是，这次我们不是从Flickr请求数据，而是从localhost URL请求数据。

The onOpenSocialResult method in the code above takes XML data produced by our index.php file, calculates the latitude/longitude pairs for each of the person XML objects, and adds a Marker for this person to the map. Then when the user clicks the Marker, our application displays an info window containing the person’s name.

上面代码中的onOpenSocialResult方法获取由我们的index.php文件生成的XML数据，计算每个person XML对象的纬度/经度对，并将该人员的标记添加到地图上。 然后，当用户单击标记时，我们的应用程序将显示一个包含该人姓名的信息窗口。

Figure 6 demonstrates what this looks like.

图6演示了它的外观。

As I mentioned earlier, this article is slightly ahead of the curve – none of the services currently supporting OpenSocial support the 0.8 REST format. However, it’s clear that they soon will, and this code should serve as a useful foundation for you to make a start with querying data from social networks using the OpenSocial 0.8 standard.

正如我之前提到的，本文稍稍领先一些-当前不支持OpenSocial的服务均不支持0.8 REST格式。 但是，很明显，它们很快就会实现，并且此代码应成为您使用OpenSocial 0.8标准从社交网络查询数据的有用基础。

从这往哪儿走 (Where to Go from Here)

We covered a lot of ground in this article, no? First, we demonstrated how to use Flex to build Flash applications. We then learned how to embed a beautiful, dynamic Google Map into a Flex application. Then we looked at how to retrieve and process data from an XML data source (whether it be via the Flickr API or the OpenSocial API). Finally, I demonstrated how to plot that data as interactive markers on a map.

我们在本文中介绍了很多内容，不是吗？ 首先，我们演示了如何使用Flex来构建Flash应用程序。 然后，我们学习了如何将精美的动态Google Map嵌入到Flex应用程序中。 然后，我们研究了如何从XML数据源(无论是通过Flickr API还是OpenSocial API)检索和处理数据。 最后，我演示了如何将数据绘制为地图上的交互式标记。

The techniques used in this example should provide you with some great starting points for your own geocoding/mapping applications (don’t forget to download the code archive for this article). I look forward to seeing what you create!

本示例中使用的技术应为您自己的地理编码/映射应用程序提供一些很好的起点(请不要忘记下载本文的代码档案 )。 我期待看到您的创造！

测验自己！ (Quiz Yourself!)

Test your understanding of this article with a short quiz, and receive a FREE PDF of my book, Getting Started With Flex 3. The first 100 people to complete the quiz will also receive a paper copy delivered to their doors for FREE, thanks to Adobe Systems.

通过简短的测验 ，测试您对本文的理解，并获得我的书《 Flex 3入门》的免费PDF。 借助Adobe Systems，完成测验的前100人也将免费获得纸质副本到他们的门口。

Take the quiz!

参加测验！

翻译自: https://www.sitepoint.com/opensocial-maps-mashup-flex/

opensocial

相关资源：jdk-8u281-windows-x64.exe