（这是从我的另一篇文章中分离出来的，Google Maps API v3 in PhoneGap:markers not drawing correct after move）。我一直在使用 PhoneGap 在 Android 上开发 Google Maps API 3 应用程序。它应该跟踪用户的位置并用标记和围绕它的圆圈标记位置。我一直在 Android 2.3 上开发它，它运行良好。然后我升级到安卓 4.x 的手机，我想它仍然运行良好。
上周，当我移动标记和圆圈时，我开始注意到谷歌地图做了一些奇怪的事情。它似乎创建了一个重复的标记和圆圈，而不是仅仅移动它们。在另一篇文章中，我得到了 Marker 问题的答案，但没有得到 Circle 的答案。有时，如果我更改缩放，那么重复的圆圈似乎消失了。而且，它偶尔会从顶部画出一些奇怪的切线。请参阅下面的图片。
我在手机上收到 Android 更新到 4.1.1 版后不久就开始注意到这一点。不确定这是否相关，我找不到有关问题的任何信息。
我将地图和 phonegap 代码减少到一个非常小的示例，并且它仍在执行此操作。我很确定这与phonegap无关。无论如何，我将我的phonegap升级到2.2，但正如预期的那样，它没有帮助。谁能告诉我在移动圆圈时是否做错了什么？
我尝试的一种解决方案是在移动之前隐藏圆圈，然后在移动后再次显示它。这似乎解决了重复和切线问题，但它使地图闪烁，当你每 3 秒左右移动一次时，这真的很烦人。所以这似乎不是一个可以接受的解决方案。测试代码如下。请注意，我在测试代码中删除了我的 Google Maps API 密钥。
我还了解到，让它正确重绘的一种方法是拖动地图，使任何圆圈的任何部分都不可见。然后，当我将它拖回以使圆圈可见时，它被重绘为一个正确的圆圈。
谢谢，埃里克
<!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 onUnLoad() {
console.log("clearing watch " + watchID);
navigator.geolocation.clearWatch(watchID);
}
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,
optimized: false,
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.setVisible(false);
searchCircle.setCenter(myLocation);
// searchCircle.setVisible(true);
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" onunload="onUnLoad()">
<div id="map_canvas" style="width: 100%;height:80%"></div>
<a href='#' onclick="GenerateFakeMovement();" style="padding-top:5px">MAKE FAKE MOVEMENT</a>
</body>
</html>
