Google Maps API v3 w PhoneGap: znaczniki nie rysują się poprawnie po przeniesieniu

Question

Nov 22, 2012, 04:58 AM

Google Maps API v3 w PhoneGap: znaczniki nie rysują się poprawnie po przeniesieniu

Pracowałem nad aplikacją Google Maps API 3 na Androida za pomocą PhoneGap. Powinien śledzić lokalizację użytkowników i oznaczyć lokalizację znacznikiem i okręgiem wokół niego. Rozwijałem to na Androidzie 2.3 i działało dobrze. Następnie zaktualizowałem do telefonu z Androidem 4.x i nadal działał dobrze, pomyślałem.

W zeszłym tygodniu zacząłem zauważać, że robię jakieś dziwne rzeczy, kiedy poruszam znacznikami. Wydaje się, że tworzy duplikat znacznika zamiast go tylko przenosić. To samo z okręgiem. Czasami, gdy zmieniam powiększenie, duplikaty wydają się znikać. Ale czasami rysuje dziwną linię styczną. Zobacz zdjęcia poniżej.

Było to wkrótce po otrzymaniu aktualizacji Androida na moim telefonie do wersji 4.1.1. Nie jestem pewien, czy to jest powiązane, nie mogę znaleźć żadnych informacji o problemie.

Zredukowałem kod mapy i kod telefonu do mniej niż 100 linii i nadal to robię. Jestem pewien, że nie jest to związane z mapą, ale i tak zaktualizowałem ją do wersji 2.2, ale to nie pomogło. Czy ktoś może powiedzieć, czy robię coś złego podczas przesuwania znacznika i kręgu? Pamiętaj, że usunąłem klucz API Google Maps poniżej.

Dzięki, 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>