javascriptandroidactionscript-3airexternalinterface

How do I communicate between JS and AS3 in an AIR Android Application?

I am using ExternalInterface but I have never worked with it before so I don't know what really to do. I don't even know if ExternalInterface works with AIR Android .

I am trying to implement the JS Google Maps API . At this point I am able to load the webpage with StageWebView. I can access the longitudes and latitudes values in JS but I need to access those values from AS3 when the selects a location on the map.

Here is HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"> </div>
      <script src="map.js"> </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBCPwGs_7_ys3eyx7pyjPeVFoYABeSUzw
        &libraries=visualization&callback=initMap">
    </script>

  </body>
</html>

JS:

var lat;
var lng;
 window.initMap = function() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 100,
    styles: [{
      featureType: 'poi',
      stylers: [{ visibility: 'off' }]  // Turn off points of interest.
    }, {
      featureType: 'transit.station',
      stylers: [{ visibility: 'off' }]  // Turn off bus stations, train stations, etc.
    }],
    disableDoubleClickZoom: true
  });

     map.addListener('click', function(e) {
  var marker = new google.maps.Marker({
    position: {lat: e.latLng.lat(), lng: e.latLng.lng()},
    map: map
  });
         lat = e.latLng.lat();
         lng = e.latLng.lng();
         getLatLng();
});
}

 function getLatLng()
{
    var latlng = [];
    latlng.push(lat);
    latlng.push(lng);

    alert("coordinates", lat, lng);
    return latlng;
}

AS3:

private var _gmapHTMLFile:File;
private var _webView:StageWebView;
private var _mapURL:String;


gmapHTMLFile = File.applicationDirectory.resolvePath("gmap/gmap.html");
mapURL = gmapHTMLFile.nativePath;

webView = new StageWebView();
webView.stage = stage;
webView.viewPort = new Rectangle(0, 0,  stage.stageWidth, stage.stageHeight);
webView.addEventListener(MouseEvent.MOUSE_UP, onLocationSelected)
webView.loadURL(mapURL);


private function onLocationSelected(e:MouseEvent):void
{
   webView.loadURL("javascript:getlatlng()");

   //I also tried
   // var latslngs:Array = webView.loadURL("javascript:getlatlng()");
   // doesn't work, obviously
}

what the onLocationSelected function does is simply show an alert window inside AIR, that contains the location coordinates from the JavaScript. My question is how do I access and manipulate those lat and lng values in AS3 using the ExternalInterface Class? Any help is greatly appreciated! Thanks

Solution

  • You can't read the return value from javascript:getLatLong(), to get data from JS to AS3 the old trick is to set the window.location from JS, then in AS3 listen for the LOCATION_CHANGING event and parse the data out of the changing location, and event.preventDefault() so the location doesn't actually change.

    AS3:

    webView.loadURL("javascript:sendLatLng()");

    JS:

    function sendLatLng() {
    location.href = "?lat=" + lat  +"&lng=" + lng;
}

    AS3:

    webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, locationChanging);

function locationChanging(e:LocationChangeEvent):void {
    e.preventDefault();
    var query:String = e.location.split("?")[1];
    var vars:URLVariables = new URLVariables(query);
    trace(vars.lat, var.lng);
}

    You can try the StageWebViewBridge library to help you with this.

    You could also try using a Web View ANE that supports JS communication.