Google Maps API v3 in PhoneGap: Marker Zeichnung nicht richtig nach dem Umzug

Habe ich gearbeitet, auf einer Google-Maps-API 3 Anwendung auf Android mit PhoneGap. Es sollte die Länge der Benutzer-Standort und markieren Sie die Position mit einem marker und einem Kreis um ihn herum. Ich hatte die Entwicklung dieser auf Android 2.3 und es war in Ordnung arbeiten. Ich habe dann ein Upgrade auf ein Telefon mit Android 4.x und es war immer noch gut funktioniert, dachte ich.

Letzte Woche begann ich zu bemerken, es zu tun einige seltsame Dinge, wenn ich mich bewege den Marker. Es würde scheinen, erstellen Sie eine doppelte Markierung statt nur verschieben. Dasselbe mit dem Kreis. Manchmal, wenn ich den zoom ändern dann die Duplikate zu sein scheinen, Weg zu gehen. Aber auch, Sie gelegentlich zieht einige seltsame Tangente. Siehe Bilder unten.

Dieser wurde kurz danach erhielt ich ein Android update auf meinem Telefon, um die version 4.1.1. Nicht sicher, ob das Verwandte, ich finde keine info über ein problem.

Reduzierte ich die Karte und phonegap-code an weniger als 100 Zeilen und Ihr tun es noch immer. Ich bin ziemlich sicher, das es nichts mit phonegap, aber ich habe ein Upgrade, dass auf 2,2 sowieso sicher zu sein, aber es hat nicht geholfen. Kann jemand sagen, wenn ich mache etwas falsch beim bewegen der marker und Kreis? Beachten Sie, dass ich entfernt und meine Google-Maps-API-Schlüssel unten.

Dank,
Eric

<!DOCTYPE HTML>
<html>
<head>
<title>Marker Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html {height: 100%}
    body {height: 100%; margin:0; padding:0}
    #map_canvas {height: 100%}
</style>
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&sensor=true"></script>
<script type="text/javascript" charset="utf-8">
    //Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    //globals
    var watchID = null;
    var map = null;
    var myLocationMarker = null;
    var searchCircle = null;

    //PhoneGap is ready
    //
    function onDeviceReady() {
        startGPS();
    }

function startGPS() {
    console.log("In startGPS");

    var refreshMilliseconds = 5000;
    var options = { frequency: refreshMilliseconds, enableHighAccuracy: true};

    watchID = navigator.geolocation.watchPosition(onGPSSuccess, onGPSError, options);

    //create Google map
    var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    myLocationMarker = new google.maps.Marker({
        title: 'This is me!',
        zIndex: 90,
        map:map
    });     

    searchCircle = new google.maps.Circle({
        fillColor: '#c0e4dd',
        strokeColor: '#f15f22',
        fillOpacity: 0.5,
        radius: 1500,
        map:map
    });     
}

var onGPSSuccess = function(p) {
    //get the new coordinates
    var lat = p.coords.latitude;
    var lng = p.coords.longitude;

    console.log("watch ID " + watchID);

    //now that we have the coordinates, we can move the marker and circle on the Google Map
    MoveMarkerAndCircle(lat, lng);
};

var MoveMarkerAndCircle = function(lat, lng) {
    var myLocation = new google.maps.LatLng(lat, lng);
    myLocationMarker.setPosition(myLocation);

    searchCircle.setCenter(myLocation);

    map.setCenter(myLocation);  
}

var onGPSError = function() {
    console.log("GPS Error");
};

var GenerateFakeMovement = function() {
    var currentPosition = myLocationMarker.getPosition();
    var newLat = currentPosition.lat() + 0.01;
    var newLng = currentPosition.lng() + 0.01;
    MoveMarkerAndCircle(newLat, newLng);
}
</script>
</head>
<body  style="height:100%;text-align:center">
    <div id="map_canvas" style="width: 100%;height:80%"></div>
    <a href='#' onclick="GenerateFakeMovement();" style="padding-top:5px">MAKE FAKE MOVEMENT</a>
</body>
</html>

Google Maps API v3 in PhoneGap: Marker Zeichnung nicht richtig nach dem Umzug

welche version von PhoneGap verwenden Sie ?
sorry, ich aktualisiert die post. Ich habe nur ein Upgrade auf 2.2

InformationsquelleAutor Eric Barr | 2012-11-22

4

Ich hatte das gleiche Problem, versuchen Sie, die optimized: false Eigenschaft der marker:
```
new google.maps.Marker({
  map: map,
  optimized: false, 
  clickable: true
});
```
dieses Problem beheben sollte!
- Danke @EnemyArea! Das hat fix meine marker problem. Ich bin noch auf der Suche für eine Lösung für den Kreis Fragen. Leider ist der Kreis nicht haben, dass optimierte Immobilie. Da ich jetzt sehe, dass die Marker-Problem-und Kreis-Ausgabe sind zwei getrennte Dinge, ich werde markieren Sie diese als Antwort für das Marker-Thema und erstellen Sie einen neuen Beitrag für die Kreis-Problem.
InformationsquelleAutor EnemyArea

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.