我已经为此安静了一段时间。现在,我可以从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。

最佳答案

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

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

关于javascript - 在StageWebView的AIR Android项目中使用的JavaScript JavaScript Google Maps API无法正常工作吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38059424/

10-13 01:10