Google Maps-API für JavaScript funktioniert nicht ordnungsgemäß, wenn es in einem AIR Android-Projekt in StageWebView verwendet wird?

Ich habe damit einige Zeit für Ruhe gearbeitet. Ich kann jetzt auf Werte von Javascript innerhalb von AS zugreifen. Aber es gibt ein paar Probleme, denen ich gegenüberstehe:Google Maps-API für JavaScript funktioniert nicht ordnungsgemäß, wenn es in einem AIR Android-Projekt in StageWebView verwendet wird?

Erstens kann ich nicht die Karte auf dem Standort des Benutzers zentrieren, wenn die Karte zum ersten Mal geöffnet wird. Es funktioniert perfekt in einer HTML-Datei, funktioniert aber nicht in StageWebView.

Zweitens habe ich auch die Suchoberfläche hinzugefügt, die Wunder in HTML, aber nicht in StageWebView funktioniert. Ich bekomme Hinweise auf die eingegebene Zeichenfolge, funktioniert aber nicht, wenn ein Speicherort ausgewählt ist.

Was kann ich tun, damit es funktioniert? Hier

ist die 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>

Hier ist 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); 
}

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

Ich kann nicht die gesamte Anwendung in JS oder JAVA schreiben, weil Ich bin viel zu weit gegangen. Ich habe mehr als 15.000 Codezeilen geschrieben, die auf 65 Klassen verteilt sind. Zweitens weiß ich es nicht wirklich JS oder Java.

Quelle

2016-06-27 Danish Ajaib

Um die Karte zu zentrieren nach dem Laden es, diese Zeile in der AS onWebViewLoaded Funktion hinzufügen:

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

Quelle

2016-06-28 14:41:49 Delcasda

Wissen Sie, wie Parameter zu übergeben? –

webView.loadURL ("javascript: window.initMap ('" + param1 + "', '" + param2 + "')"); – Delcasda

Bitte stellen Sie meine Antwort als Lösung, wenn das Ihnen geholfen hat – Delcasda

Ich denke, https://github.com/myflashlab/webView-ANE könnte Ihre Probleme lösen? Es ist eine bezahlte native Erweiterung obwohl

Quelle

2016-06-28 12:27:46

Google Maps-API für JavaScript funktioniert nicht ordnungsgemäß, wenn es in einem AIR Android-Projekt in StageWebView verwendet wird?

Antwort

Verwandte Themen