FLEX：google map与google街景结合的一个实例.

实例：http://www.tricedesigns.com/portfolio/googlestreetview/main.html

 

源码：http://www.tricedesigns.com/portfolio/googlestreetview/srcview/index.html

This post is for anyone who has found themselves in the situation where they have an existing Flash component that they can't embed in their Flash/Flex application, although they still want/need to use them together.

In this example, we'll create a Flex application that uses the Google Maps API for Flash, which communicates with the Google Street View API to create a seamless experience.

The Google Street View components are available directly in the Google Maps javascript API, however they are not directly available through the Flash API. Even though they aren't available directly in the Flash API, that doesn't mean that you can't use them together. Through ExternalInterface, you can still make those the two work together seamlessly.

Take a look at this example. Any time you click on the Flash-based map, the street view below it will update to show the location that you clicked on. Go ahead and try it out... If you click on an area that doesn't support street view, then you'll get a message stating that the panorama is not available.



Now, let's take a look at how it all works together. I started with some simple examples from the Google Maps API examples page.

The Flex application is pretty simple. There's just a map instance. When the map loads, the map navigation controls are added, and the map is centered on the lat/lon coordinate (38.900218,-77.036562), which is directly in front of the white house in Washington, DC, and a marker is added at that position.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="vertical"
  paddingBottom="0"
  paddingLeft="0"
  paddingRight="0"
  paddingTop="0"
  verticalGap="0" 
  viewSourceURL="srcview/index.html">

  <mx:Script>
      <![CDATA[
import com.google.maps.overlays.Marker;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

private var marker : Marker;

private function onMapReady(event:Event):void 
      {
var centerLL : LatLng = new LatLng(38.900218,-77.036562);

         map.setCenter( centerLL, 18, MapType.NORMAL_MAP_TYPE);
         map.addControl(new ZoomControl());
         map.addControl(new PositionControl());
         map.addControl(new MapTypeControl());
         map.addEventListener(MapMouseEvent.CLICK, onMapClick);

         marker = new Marker( centerLL );
         map.addOverlay( marker );
       }

private function onMapClick(event:MapMouseEvent):void 
      {
         marker.setLatLng( event.latLng );
         ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
       }

      ]]>
  </mx:Script>

  <maps:Map 
    xmlns:maps="com.google.maps.*" 
    id="map" 
    mapevent_mapready="onMapReady(event)" 
width="100%" height="100%" 
    key="api_key_here"
    />

  <mx:ApplicationControlBar width="100%" cornerRadius="0">

    <mx:Text 
x="5" y="4" width="100%" height="100%" 
text="Click anywhere on the map to update the street view." 
selectable="false"  fontWeight="bold" fontSize="12"/>

  </mx:ApplicationControlBar> 

</mx:Application>

Whenever a MapMouseEvent.Click event happens on the mouse (the user clicks on the map), the marker moves to the click position, and the street view panorama is updated to show that click location.

Below, you'll find the additions to the HTML page that contains the Flex application instance. You can see that when the page initializes, then the street view panorama is created and is centered to display the white house.

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=api_key_here" type="text/javascript"></script>
<script type="text/javascript"> 

var myPano;   
var panoClient;
var nextPanoId;


function initialize()
{
var whiteHouse = new GLatLng(38.900218,-77.036562);
var whiteHousePOV = {yaw:180,pitch:0};

   panoClient = new GStreetviewClient();      

   myPano = new GStreetviewPanorama(document.getElementById("pano"));
   myPano.setLocationAndPOV(whiteHouse, whiteHousePOV);
   GEvent.addListener(myPano, "error", handleNoFlash);  
   panoClient.getNearestPanorama(whiteHouse, showPanoData);
}


function showPanoData(panoData) 
{
if (panoData.code != 200) {
      GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
    }

   myPano.setLocationAndPOV(panoData.location.latlng);
}

function handleNoFlash(errorCode) 
{
if (errorCode == 603) {
      alert("Error: Flash doesn't appear to be supported by your browser");
return;
    }
}  

function setPanorama( lat, lon ) 
{
    panoClient.getNearestPanorama(new GLatLng(lat, lon), showPanoData);
}

</script>

<!-- 
And the flex application embed statements would go here
-->

<div id="pano" style="width:100%;height:100%" ></div>

The Flex application communicates with the street view panorama through the ExternalInterface class, which allows us to invoke a javascript method.

ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );

This calls into the setPanorama javascript function shown below, which calls into the panoClient.getNearestPanorama() function. The callback of this method is the showPanoData() function. If panorama data is available for the current location, then the panorama gets updated. If not, then a message is displayed in the error log.

Hopefully this post shows you how you can make separate components work together in your own applications.

Related Links:

Launch Demo:
http://www.tricedesigns.com/portfolio/googlestreetview/main.html

Source Code:
http://www.tricedesigns.com/portfolio/googlestreetview/srcview/index.html

Google Maps Flash API:
http://code.google.com/apis/maps/documentation/flash/

Google Street View API:
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay

Google Maps JavaScript API:
http://code.google.com/apis/maps/

 

来自：http://www.insideria.com/2008/12/making-separate-components-wor.html