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

Question

我已经为此安静了一段时间。 现在，我可以从AS中的Javascript访问值。 但是我面临着两个问题：

首先，首次打开地图时，我无法将地图以用户的位置为中心。 它可以完美地在HTML文件中工作，但在StageWebView中不能工作。

其次，我还添加了搜索UI，该搜索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编写整个应用程序，因为，第一，我走得太远了，我编写了超过1万5千行代码，分布在65个类中，第二，我不太了解JS或Java。

Answer 1

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

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

Answer 2

我认为https://github.com/myflashlab/webView-ANE可能会解决您的问题？ 这是一个付费的本地扩展

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-06-28 14:41:49

解决方案2
0 2016-06-28 12:27:46

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-06-28 14:41:49

解决方案2 0 2016-06-28 12:27:46

解决方案1
1 已采纳 2016-06-28 14:41:49

解决方案2
0 2016-06-28 12:27:46