All geek questions in one place

Google v3 Maps API in PhoneGap: markers do not draw correctly after moving

I am working on a Google Maps API 3 application on Android using PhoneGap. It should track the location of users and mark the location with a marker and a circle around it. I developed this on Android 2.3 and it worked fine. I then upgraded to an Android 4.x phone, and it still worked fine, I thought.

Last week, I began to notice that he was doing some weird things when I move markers. It would seem to duplicate a marker instead of just moving it. Same thing with the circle. Sometimes, if I change the scale, the duplicates seem to go away. But he also sometimes draws some strange tangent line. See Images below.

This was soon after I received an update for Android on my phone to version 4.1.1. Not sure if this is related, I cannot find information about the problem.

I have reduced the card code and phone code to less than 100 lines and am still doing this. I am pretty sure that this is not related to telephone service, but I updated it to version 2.2 anyway, but it did not help. Can someone say that I am doing something wrong when moving the marker and circle? Please note that I have uninstalled my Google Maps API below.

Thanks 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>

Two points with tangent line on circleTwo points and two circles

+4
source share
1 answer

I had the same problem, try setting the optimized: false property to a marker:

 new google.maps.Marker({ map: map, optimized: false, clickable: true });

this should fix it!

+4
source

Source: https://habr.com/ru/post/1447649/

More articles:


All Articles