Google Maps API for JavaScript isn't working p

2019-09-03 20:39发布

站内问答 / JavaScript
1343 2 6

I have been working with this for quiet some time now. I am now able to access values from Javascript within AS. But there are a couple of problems I am facing:

First, I am unable center the map on the user's location when the map is first opened. It works perfectly in an HTML file but doesn't work within StageWebView.

Second, I have also added the search UI which works wonders in html but not in StageWebView. I get hints of the typed string, but doesn't work when a location is selected.

What can I do to make it work?

Here is the 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>

Here is 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);
}

related 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);
        }

I can't write the entire application in JS or JAVA because , one, I have come way too far, I have written more than 15k lines of code spread across 65 classes, second, I don't really know JS or Java.

2条回答
欢心
2楼-- · 2019-09-03 20:58

I think https://github.com/myflashlab/webView-ANE might solve your problems? It's a paid native extension though

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-09-03 21:04

To center the map after loading it,add this line to your AS onWebViewLoaded function:

webView.loadURL("javascript:window.initMap()");
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)