Google JavaScript 的 API 地图在 StageWebView 中的 AIR Android 项目中使用时无法正常工作？

Question

我已经安静地使用它一段时间了。我现在可以从 AS 中的 Javascript 访问值。但是我面临着几个问题：

首先，我无法在首次打开地图时将地图置于用户位置的中心。它在 HTML 文件中完美运行，但在 StageWebView 中不起作用。

其次，我还添加了搜索 UI，它在 html 中非常有效，但在 StageWebView 中却没有。我得到输入字符串的提示，但在选择位置时不起作用。

我该怎么做才能让它发挥作用？

这里是 html:

 <!DOCTYPE html>
 <html>
   <head>
     <style type="text/css">
       html, body 
         {
             height: 100%; margin: 0; padding: 0;
         }

  #map 
    {
        height: 100%;
    }

    .controls 
    {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  #pac-input 
    {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
  }

    #pac-input:focus 
    {
    border-color: #4d90fe;
  }

  .pac-container {
    font-family: Roboto;
  }

  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }

  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
  #target {
    width: 345px;
  }

   </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
  <script src="map.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js? key=<MY_KEY>&libraries=places&callback=initMap"
     async defer></script>

 </body>
</html>

这是 JS:

var marker;
var map;
var pos;
var ASLats;
var ASLngs;

window.initMap = function() {

map = new google.maps.Map(document.getElementById('map'), 
{
center: {lat: 0, lng: 0},
zoom: 15,
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: false

 });

 var input = document.getElementById('pac-input');
 var searchBox = new google.maps.places.SearchBox(input);
 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
  });

  var markers = [];
// Listen for the event fired when the user selects a prediction and  retrieve
 // more details for that place.
 searchBox.addListener('places_changed', function() {
 var places = searchBox.getPlaces();
   console.log(places);
 if (places.length == 0) {
   return;
};

  // Clear out the old markers.
  markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

  // For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
  var icon = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  };

    // Create a marker for each place.
  markers.push(new google.maps.Marker({
    map: map,
    icon: icon,
    title: place.name,
    position: place.geometry.location
  }));

    if (place.geometry.viewport) {
    // Only geocodes have viewport.
    bounds.union(place.geometry.viewport);
  } else {
    bounds.extend(place.geometry.location);
  }
 });
     map.fitBounds(bounds);

  });


  /* if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
   };

   map.setCenter(pos);

     }, function() {
     handleLocationError(true, infoWindow, map.getCenter());
   });
    } else {

   // Browser doesn't support Geolocation
  // handleLocationError(false, infoWindow, map.getCenter());

      alert(" Geolocation not supported on this browser ");

   }*/
        map.addListener('click', function(e) {

    SetMarker(0);

    marker = new google.maps.Marker({
     position: {lat: e.latLng.lat(), lng: e.latLng.lng()},
     map: map
    });

    var infowindow = new google.maps.InfoWindow({
    content:"Latitudes: " + e.latLng.lat() + " Longitudes: " + e.latLng.lng()
        });

    infowindow.open(map,marker);

    document.location.href = "hkjk:\hgjyh.com?data=" + e.latLng.lat() + ","  + e.latLng.lng()+ "e" ;

    });
}


function SetMarker(position) {
//Remove previous Marker.
if (marker != null) {
    marker.setMap(null);
 }
}

function setMapCenter(lats, lngs){

ASLats = lats;
ASLngs = lngs;
pos = {
    lat: ASLats,
    lng: ASLngs
  };
   map.setCenter({lat:pos.lat, lng:pos.lng});
//map.setCenter(pos);
  alert("set map center function was called with " + pos.lat + " " + pos.lng);
}

相关AS：

 private function showMap():void 
        {
            webView = new StageWebView();
            webView.stage = stage;
            webView.viewPort = new Rectangle(0, 0,  stage.stageWidth, stage.stageHeight);
            webView.addEventListener(Event.COMPLETE, onWebViewLoaded, false, 0, true);
            webView.addEventListener(MouseEvent.CLICK, onWebViewClicked, false, 0, true);

            trace("Loading Map");
            webView.loadURL(mapURL);
            trace("Map loaded!");
            /*webView.loadURL("javascript:setMapCenter('" +
            _lats + "', '" + _lngs + "')");*/
        }




 private function onWebViewClicked(e:MouseEvent):void 
        {
            webView.viewPort = null;
        }

        private function onWebViewLoaded(e:Event):void 
        {
            webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, getUpdate, false, 0, true);
        }

        private function getUpdate(e:LocationChangeEvent):void 
        {
            e.preventDefault();
            trace("Location: ", e.location);

            var result:String = e.location;
            latitudes = Number(result.substring(result.indexOf("=") + 1, result.indexOf(",")));
            longitudes = Number(result.substring(result.indexOf(",") + 1, result.indexOf("e")));

            trace(latitudes, longitudes);
        }

我无法用 JS 或 JAVA 编写整个应用程序，因为，第一，我已经走得太远了，我已经编写了超过 15k 行的代码，分布在 65 类，第二，我真的不懂 JS 或 Java。

Answer 1

我想 https://github.com/myflashlab/webView-ANE 可以解决您的问题？这是一个付费的原生扩展

Answer 2

要在加载地图后将其居中，请将此行添加到您的 AS onWebViewLoaded 函数中：

webView.loadURL("javascript:window.initMap()");

Google JavaScript 的 API 地图在 StageWebView 中的 AIR Android 项目中使用时无法正常工作？

Google Maps API for JavaScript isn't working properly when used in an AIR Android Project within StageWebView?

javascript

air

android

google-maps